scale.linear()返回NaN

Question

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

我可以在firebug中看到，当我的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();

这是一个小摆设：http://jsfiddle.net/NAhD9/5/

Answer 1

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

如果希望width属性基于myJSON对象中的v属性进行缩放，则应该使用.attr("width",function (d) {return w_bar(d.v)})。

这就是scale在d3中的工作方式，它们是一个函数，它接受一个参数(比例的domain中的某个值)并返回转换成适合您的标度的range的值。

更新的jsFiddle 这里.

Answer 2

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

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

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