scale.linear() 正在返回 NaN答案

【问题标题】：scale.linear() is returning NaNscale.linear() 正在返回 NaN
【发布时间】：2013-07-23 00:41:24
【问题描述】：

我正在运行一个简单的条形图，使用 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/

【问题讨论】：

标签： d3.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

好吧，w_bar 不是数字，width 属性必须是数字。因此，NaN。

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

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

更新了 jsFiddle here.

【讨论】：