1

我正试图围绕 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，对吧？

我没有得到什么？这是一个小提琴。

4

1 回答 1

1

您的比例已经反转范围以考虑从屏幕顶部开始的 SVG y 坐标 - 即，您有domain([min, max])和range([max, min])。这意味着您对 y 位置和高度的计算应该颠倒，因为您的比例已经直接计算了 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/

于 2013-03-07T16:16:15.323 回答