d3 选择 .attr('x1') 返回 r.getAttribute 不是函数

Question

我正在尝试通过 跟踪一条线的位置xScale。所以一旦x1到达 xScale1.range()[1]它的最终位置就应该改变颜色。在 DOM 行中，x1 属性的值为 500。我做错了什么？

g1.append('line')

  .attr('stroke-width', 1)

  .style('stroke', 'white')

  .attr('x1', xScale1.range()[0] + 100)

  .attr('x2', xScale1.range()[0] + 100)

  .attr('y1', yScale1.range()[0])

  .attr('y2', yScale1.range()[1])

  .transition()

  .duration(duration)

  .ease(d3.easeLinear)

  .attr('x1', xScale1.range()[1])

  .attr('x2', xScale1.range()[1])

  .style('stroke', function (d) {

    changeColour();

  })

  

function changeColour(d) {

  if (d3.select(this).attr('x1') === xScale1.range()[1]){

    return 'red';

  };

}

Answer 1

this不再指向选择对象，而是指向局部函数范围。通过嵌套函数，您已经更改了该值。您可以通过将 gthis作为参数传递给 来轻松避免这种情况changeColour。function change colour(element)change colour(this)