d3.js - 为Y轴添加一个附加刻度不起作用

Question

我使用以下绘制了一个d3图形。

我想Y轴有一个额外的勾号。这意味着，域范围达到了我的数据集中的最大y值。并且我想要一个额外的图表，这个图表不会被图表所触及。

为了达到这个目的，我宣布了一个变量，其中存储了滴答计数，然后在Y轴的滴答（）中增加了一个。 这不起作用，相反，y轴现在变得模糊。

这里是代码的相关部分：

yScale = d3.scale.linear().range([height - margin.top, 
     margin.bottom 
    ]).domain([0, max_y]), 


    yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .innerTickSize(-width + margin.left) 
    .outerTickSize(0) 
    .tickPadding(10); 

var ticksCount = yAxis.ticks(); 
yAxis.ticks(ticksCount + 1); 

vis.append("svg:g") 
    .attr("class", "y axis") 
    .style({ 
     'stroke': 'Black', 
     'fill': 'none', 
     'stroke-width ': 1, 
     "font-size": "13px" 
    }) 
    .attr("transform", "translate(" + (margin.left) + ",0)") 
    .call(yAxis); 

Answer 1

axis.ticks()作为吸气剂返回阵列，而不是一个号码。

因此，该...

​​

...返回蜱的数目（这是10）作为阵列（[10]）。然后，当你尝试1到这个阵列，看看会发生什么：

console.log([10] + 1)

你有101只蜱结束了（注：101这里实际上是一个字符串，而不是数字）。这就是为什么你说“y轴现在变得模糊”。它没有模糊，你只是有一个大量的蜱。

你可能会认为你应该做的：

var ticksCount = yAxis.ticks()[0]; 
//get the element -------------^ 
yAxis.ticks(ticksCount + 1); 

但是，这将使没有区别：您将在轴更蜱，但在轴的最小/最大将是相同的。

解决方案：改变不是域：

yScale = d3.scale.linear() 
    .range([height - margin.top, 
     margin.bottom 
    ]).domain([0, max_y * 1.05]) 
    //add 5% to the top ----^