CODEWITHSUNDEEP
javascriptd3.jssvg
echo
echo

Reputation: 813

javascript d3 ticks format

I am using d3.v4 and went though this tutorial for modifying number of ticks and the tick format https://bl.ocks.org/mbostock/9764126

however this works 

 svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11, '.0s') )

but when I do 

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11).tickFormat(d3.format('.0s')) )

format is right but too many ticks The tick format seems to overwrite the number of ticks as the format is correct but there are too many ticks. I can get the ticks itself working by using 

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11) )

The tick format method is valid for d3v4, so what am I doing wrong here?

Upvotes: 0

Views: 237

Answers (1)

ksp585
ksp585

Reputation: 1770

@echo - I would use .tickValues() along with d3.range() for this instead of .ticks(). As .tickValues() gives more control compared to .ticks().

Here is your modified code:

 <script>
  const svg = d3.select("body").append("svg").attr("width",600).attr("height",500);
  const g = svg.append("g").attr("transform", "translate(0,500)");
  const xScale = d3.scaleLinear().domain([100000,1000000]).range([0,500]);
  const xAxis = d3.axisBottom(xScale).tickFormat(d3.format('.0s')).tickValues(d3.range(100000,1000000,400000));
  g.call(xAxis).attr("transform","translate(10,200)");
</script>

jsfiddle: https://jsfiddle.net/435j26sf/14/

Also, check this SO question on .tickValues() Change the ticks on x-axis.

Hope this helps.

Upvotes: 2

Related Questions