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)