在d3.selectAll中使用attr方法时'undefined'

Question

我正在使用'd3-select'软件包来改变我的情节，我被这个奇怪的错误所阻挡。

当我在selectAll（'path'）之后使用'attr'方法时，它工作正常，但是当我在selectAll（'line'）上使用它时它会中断。我发现selectAll（'line'）上的'attr'一无所获。

代码

const paths = this.$gPlot.selectAll('path');
console.log('paths =', paths);
paths.attr('d', path => console.log(path)); // there's two path elements

const lines = this.$gPlot.selectAll('line');
console.log('lines =', lines);
lines.attr('y1', line => console.log(line)); // there's three line elements

控制台上的结果

我不知道这里发生了什么。

Answer 1

当您为attr()之类的函数提供函数时，函数的第一个参数是绑定到元素的数据，该数据通常先前通过调用组上的data()来分配。它本身不是SVG元素。

在您的情况下，有数据绑定到路径，但不是行，因此在调用函数时，您将获得undefined行。要通过该函数获取对SVG元素的引用，请使用：

lines.each(function() {
    console.log(this);
})

你必须使用完整的功能，而不是速记，才能正确确定this范围