Question

我正试着绕着D3.js提供的日志刻度。应该指出的是，截至昨天，我不知道对数刻度是什么。

在练习中，我制作了一个柱形图，显示了一个包含四个值的数据集：[100, 200, 300, 500]。我使用对数刻度来确定它们的高度。

var y = d3.scale.log()
    .domain([1, 500])
    .range([height, 1]);

此刻度不起作用（至少在应用于y轴时也不起作用）。表示值500的条形不会像应该的那样到达svg容器的顶部。如果我将域更改为[100, 500]，该栏确实到达顶部但轴的刻度与栏的正确值不对应。因为4e + 2是4 * 10 ^ 2，对吧？

我没有到这里来的？这是a fiddle。

Answer 1

您的比例已经反转了范围，以便考虑从屏幕顶部开始的SVG y坐标 - 即，您有domain([min, max])和range([max, min])。这意味着您的y位置和高度的计算结果应该相反，因为您的比例已经直接计算过：

bars.append("rect")
    .attr("x", function (d, i) { return i * 20 + 20; })
    .attr("y", function (d) { return y(d); })
    .attr("width", 15)
    .attr("height", function (d) { return height - y(d); });

这是一个更新的小提琴：http://jsfiddle.net/findango/VeNYj/2/

D3日志刻度显示错误的数字

1 个答案: