javascript - D3无法获取this.parentNode

Question

我已经开始使用 d3，此时我正在编辑给定的脚本以满足新的要求。我尝试访问变量，但无法访问它。有人可以帮我吗？

问题出在第 5 行，我无法获取“this.parentNode”，但我需要它。

有人能指出我正确的方向吗？

感谢您的宝贵时间

伟大的事情

function lines(x, yl, yr, n, svgElement, colors, Line) {
    Line = Line || d3.line()
        .x(function(d) { return x(d.time) + x.bandwidth() /2; })
        .y(function(d) {
            if(parseInt(d3.select(this.parentNode).attr("data-index")) !== scope.dataset.labels.indexOf(scope.rightas) && scope.rightas !== null) {
                return yl(d.y); 
            }
            return yr(d.y);
        });

    svgElement.selectAll('.line')
        .data(function(d){ return [d]; })
        .enter()
        .append("path")
        .attr("d", Line)
        .attr("class", "line")
        .style("fill", "none" )
        .style("stroke", function(d, i, j) {
            return d3.rgb(colors[d3.select(this.parentNode).attr("data-index")]).darker();
        })
        .style("stroke-width", "2")
}

Answer 1

您无法从行生成器内部获取this DOM 元素(无论是否有 Angular)。行生成器无法访问您使用它附加的元素。

API很清楚:

When a line is generated, the x accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments. (emphasis mine)

显然，y 访问器也是如此。因此，如您所见，仅传递了数据。

因此，在本例中，this 只是 window ，并且这里没有 parentNode。

看看这个演示(因为堆栈片段需要很长时间才能 console.log 窗口对象，所以我只使用 this.name):

var line = d3.line()
  .x(function(d) {
    console.log(this.name);
    return d;
  })
  .y(function(d) {
    return d;
  });

line([1]);

<script src="https://d3js.org/d3.v5.min.js"></script>