Question

I am trying to create a d3 chart with logarithmic scale(1,10,100..). I used their functions and call but not much help.

var x = d3.scale.log()
    .domain([1,10])
    .range([0, width]);

var y = d3.scale.log()
    .domain([1,10])
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)   
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)   
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d[xAxxis]); })
    .y(function(d) { return y(d[yAxxis]); });
var svg = d3.select("#"+this.divid).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain(d3.extent(totalArray, function(d) { return d[xAxxis]; })).nice(); 
y.domain(d3.extent(totalArray, function(d) { return d[yAxxis]; })).nice(); 

Is there any way i can create the axis with 1e+0,10e+0,100e+0 rather than 1e+0,2e+0,3e+0

Answer 1

You can control which labels the axis renders using either the tick() or tickValues() method, depending on how you want to go about it. See the d3’s API documentation for more details. Also, note that a log scale’s tick() method takes no arguments, so you’ll likely have to use tickValues() though the other method might come in handy for formatting.