javascript - D3 散点图代码中 <circle> 属性 r ="NaN"的无效值

Question

我在 d3 散点图中的 r 值上遇到 NaN 错误。

控制台错误:错误:属性 r="NaN"的值无效

来自这部分代码:

g.selectAll(".response") .attr("r", 函数(d){ 返回 responseScale(d.responses)； }) .attr("cx", 函数(d){ 返回 x(d.age); }) .attr("cy", 函数(d){ 返回 y(d.value)； })

这里是秤的设置方式:

var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
    return d.responses;
}))
.range(2, 15);

这是一个数据示例:

var data = [
{glazed: 3.14, jelly: 4.43, powdered: 2.43, sprinkles: 3.86, age: 18, responses: 7},
{glazed: 3.00, jelly: 3.67, powdered: 2.67, sprinkles: 4.00, age: 19, responses: 3},
{glazed: 2.00, jelly: 4.00, powdered: 2.33, sprinkles: 4.33, age: 20, responses: 3},

我试过在 d.responses 前面加上一个加号并使用 parseFloat()。

该代码是本类(class)中使用的示例，Learning to Visualize Data with D3.js (关于创建散点图的章节)

如有任何建议，我们将不胜感激!

Answer 1

在你的代码中:

var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
    return d.responses;
}))
.range(2, 15);

range() 函数的参数应该是一个值数组，如下所示:.range([2,15]);

修正比例:

 var responseScale = d3.scale.linear()
    .domain(d3.extent(data, function(d){
        return d.responses;
    }))
    .range([2, 15])

;

可以找到有关体重秤的更多信息 here .如果您仍有问题，请告诉我!