javascript - D3js 序数轴不显示所有刻度

Question

我在 d3 中实例化一个序数尺度并将其关联到一个轴。然后将该轴附加到页面上的 SVG Canvas 上；这里是一个片段:

var arange = [1,2,3,4,5];
var ticks = ['one' , 'two', 'three', 'four', 'five'];

var myScale = d3.scale.ordinal();
myScale.range(arange)
   .domain(ticks);

var myAxis = d3.svg.axis()
       .scale(myScale)
       .orient("bottom");

canvas.append("g")
.attr("class", "time axis")
.attr("transform" , "translate ("+myOrigin[0]+" , "+myOrigin[1]+")")
    .call(myAxis);

如果我稍后更改比例(添加另一个刻度和相应的范围，即 arange = [1,2,3,4,5,6] 和刻度 = ['one' , 'two', ' Three', '四'，'五'，'六'])轴的长度正好达到新的范围，但并非所有刻度都被绘制:最后的一些刻度以某种方式丢失了。

可以请您赐教吗？

Answer 1

强制 D3 显示所有标签的唯一方法是显式将它们设置为刻度值。在你的情况下，这将是这样的:

var myAxis = d3.svg.axis()
   .scale(myScale)
   .tickValues(ticks)
   .orient("bottom");