D3.js:在路径元素

时间:2016-10-31 18:10:32

标签: javascript d3.js undefined

当我创建线条时,我有一个未定义的d对象的问题,然后我尝试在线上实现一个函数,改变笔触属性的颜色。

有问题的部分就是这个:

var myLine = mySVG.append("path")
    .attr("class", "line")
    .attr("d", line(ourValues))  // by changing this to myData one can get the unsorted data plotted instead, this is the attribut theat connects the paths to a certain object/array
    .attr("stroke", function (d) {console.log("what is this"); console.log(d); return "red";});

我尝试使用console.log来查看当我无法使用其功能时发生的事情。

我使用v3的d3.js但是把它放到JSfiddle的v4库中我仍然无法让它工作所以问题在于我不知道我的数据在哪里以及如何在这种情况下检索它。

我的小提琴:

https://jsfiddle.net/jstz8fwq/

(问题出在小提琴的第82行)

1 个答案:

答案 0 :(得分:2)

在D3中,第一个参数(传统上称为d)是绑定到该元素的数据(单数)。

但是,您没有绑定数据:

var myLine = mySVG.append("path")
    .attr("class", "line")
    .attr("d", line(ourValues))

如果我们更改代码并实际将数据绑定到该元素:

var myLine = mySVG.append("path")
    .attr("class", "line")
    .datum(ourValues)
    .attr("d", line)

您将在控制台中看到data。检查这个小提琴:https://jsfiddle.net/92y46y48/