D3.js: 在调用路径元素上的属性的函数中创建一行并且 d 对象未定义

Question

我在创建线条时遇到未定义 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 该值以查看当我无法使我的功能正常工作时发生了什么。

我使用 d3.js 的 v3，但是将它放入带有 v4 库的 JSfiddle 我仍然无法让它工作所以问题是我不明白我的位置数据传输以及在这种情况下如何检索它。

我的 fiddle 的：

https://jsfiddle.net/jstz8fwq/

（问题出在fiddle中的第82行）

Answer 1

在 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。检查此 fiddle：https://jsfiddle.net/92y46y48/

D3.js: 在调用路径元素上的属性的函数中创建一行并且 d 对象未定义

D3.js: Making a line and the d-object is undefined in a function calling an attribute on the path-element

javascript

undefined

d3.js