无法在d3js中绘制线条

时间:2016-02-25 03:20:40

标签: javascript json d3.js path

第一次d3.js用户,也是javascript的新手。我想创建一个绘制3波的图表,其中第三个是第一个2的部分解构。我已经将我需要的计算保存到一个名为data的JSON对象中,我创建了3行{{1} } line2line3。我已经关注了youtube教程,并在stackoverflow和Mike Bostock的维基百科页面上查看了无数的代码片段。我不能为我的生活弄清楚为什么线条不画画?我是JSON的新手,但我想学习它,这就是我保存数据的方式。我没有正确绑定数据吗?我运行代码时控制台没有给我一个错误,但我注意到路径包含NAN或不是JSON对象的time成员的数字值:d="M0,NaNL1.8,NaNL3.6,NaNL5.4,NaNL7.2,NaNL9,NaNL10.8,NaNL12.600000000000001,NaNL14.4,NaNL16.200000000000003,NaNL18.000000000000004,NaNL19.800000000000004,NaNL21.600000000000005,NaNL23.400000000000006,NaNL25.200000000000006,NaNL27.000000000000007,NaNL28.800000000000008,NaNL30.60000000000001,NaNL32.40000000000001,NaNL34.20000000000001,NaNL36.00000000000001,NaNL37.800000000000004,NaNL39.599999999999994,NaNL41.4,NaNL43.199999999999996,NaNL44.99999999999999和它会一直持续下去。我假设这些是我在第一次循环中生成的值?

可能会出现问题的部分代码(以下jsfiddle链接中提供完整代码):

    var line1 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y1); });

var line2 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y2); });

var line3 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y3); });

data.forEach(function(d) {
    d.time = + d.time;
    d.wave1 = d.wave1;
    d.wave2 = d.wave2;
    d.wave3 = d.wave3;
});

也许这个:

    // draw lines? what am I missing?
canvas.append("g")
    .datum(data)
    .attr("class", "line")
    .attr("d", line1);

感谢任何帮助,我很乐意提供任何其他信息。谢谢!

这是我尝试的方法:https://jsfiddle.net/fdhnqh1d/3/

1 个答案:

答案 0 :(得分:1)

我已更新你的小提琴https://jsfiddle.net/fdhnqh1d/4/来修复这一代。

您的线路生成器引用了未定义的属性d.y1。在这里,我更改为d.wave1以匹配您的数据模型。

var line1 = d3.svg.line()
.x(function(d) { return widthScale(d.time); })
.y(function(d) { return verticalScale(d.wave1); });

现在输出

M0,263.5596698504196L1.8,263.5674382668522L3.6,263.5751378843530...