CODEWITHSUNDEEP
javascriptd3.js
learning_bee
learning_bee

Reputation: 165

customized logarithmic d3 chart

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

Upvotes: 0

Views: 524

Answers (1)

seliopou
seliopou

Reputation: 2916

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.

Upvotes: 1

Related Questions