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()作为getter返回数组，而不是数字。

因此，这......

var ticksCount = yAxis.ticks();

...以数组（10）的形式返回刻度数（[10]）。然后，当您尝试向此数组添加1时，请查看会发生什么：

＆＃13;

console.log([10] + 1)

＆＃13;

你最终得到101个刻度（注意：这里的101实际上是一个字符串，而不是一个数字）。这就是为什么你说＆＃34; y轴现在模糊了＆＃34; 。它没有模糊，你只需要大量的滴答声。

您可能认为应该这样做：

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 ----^

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

1 个答案: