d3 selecting .attr('x1') returns r.getAttribute is not a function

user_7154017 0
Viewed 252

I'm trying to track position of a line by xScale. So as soon as x1 becomes xScale1.range()[1] it reaches its final position and should change a colour. In the DOM line has x1 attribute with a certain value of 500. What am I doing wrong?

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';
  };
}
d3.js data-visualization svg javascript
1 Answers

this no longer points to the selection object, but instead to the local function scope. By nesting the functions, you've changed that value. You can easily avoid this by passin g this as an argument to changeColour.

function change colour(element)

change colour(this)
user_50153560
Related