3

我使用 d3.scale.linear() 运行一个简单的条形图，并为此示例对域范围进行硬编码

我可以在萤火虫中看到，将宽度的属性应用于我的 div 时，w_bar 似乎是 NaN。

这是为什么？

var w_bar = d3.scale.linear()
    .domain([0, 107525233]) //harcoded
    .range(["0px", "290px"]);

var theList = d3.select("#list").selectAll("div")
    .data(myJSON);

theList.enter().append("div")
    .text(function (d) { return d.v; })
    .transition()
    .duration(1000)
    .attr("width", w_bar); // Why NaN?

theList.exit()
    .remove();

这是jsfiddle：http: //jsfiddle.net/NAhD9/5/

4

2 回答 2

3

嗯，w_baris Not a Number，width属性必须是数字。因此，NaN。

如果您希望您的width属性根据对象中的属性进行缩放v，myJSON您应该说 .attr("width",function (d) {return w_bar(d.v)}).

这就是比例尺的工作方式d3，它们是一个函数，它接受一个参数（domain比例尺内的某个值）并返回转换为适合range您的比例尺的值。

在这里更新了 jsFiddle 。

于 2013-07-23T19:09:21.807 回答
2

您需要使用一个函数来告诉 d3 您希望数据如何交互以扩展以创建数组：

.attr("width", function(d){ return w_bar(d.v); })

这将从组成数组v的对象中获取所有属性，用 缩放它们，并将其对应矩形的宽度设置为等于该值。myJSONw_bar

于 2013-07-23T19:06:57.873 回答