Question

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

我可以在萤火虫中看到，当向我的div提供宽度attr时，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/

Answer 1

好吧，w_bar不是数字，width属性需要是一个数字。因此，NaN。

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

这是scale在d3中的工作方式，它们是一个函数，它接受一个参数（在scale的domain内的某个值）并返回该值以适应{{1}你的规模。

更新了jsFiddle here。

Answer 2

您需要使用一个函数告诉d3您希望数据如何与之交互以缩放以创建数组：

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

这将获取构成v数组的对象的所有myJSON属性，使用w_bar缩放它们，并将相应矩形的宽度设置为等于该值。

scale.linear（）返回NaN

2 个答案: