d3. Understanding the responsive x-axis scale of js

Hello,

I am currently making a line graph with d3.js.
When you display a line graph on your smartphone, the labels on the x-axis of the date overlap.

Even if you specify the number of scales with ticks(), you will be forced to change the number of scales to d3, so
I can't think of a good way.

I would like to reduce or increase the number of scales according to the size of the SVG.
What should I do?

javascript d3.js

2022-09-30 21:11

1 Answers

I think this sample code will be helpful.
You can increase or decrease it by using filters using the tickValues method and returning true conditions.

Order Ticket Filtering

varxAxis=d3.svg.axis()
    .scale(x)
    .tickValues(x.domain().filter(function(d,i){return!(i%2);}))
    .orient("bottom");

2022-09-30 21:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656