d3 draggable threshold, d.x is undefined

Question

https://jsfiddle.net/wiremanj20/cfsh4gvo/150/

d3.selectAll("circle")
        .attr("fill", function(d) {
      console.log(linePosition)
     // console.log(attr("cx"));
      if (d.x <=(linePosition)) {
        return lowColor 
      } else {
        return highColor 
      }
      })
      ;
  

On line 133, my if statement is not working. d.x is always undefined and I am unsure why. The goal is to make it so that the graph points change color when the threshold is in front of them. thank you

Answer 1

d is not an object, is an array that has two values. That's why if you use d.x the output is undefined, because is not an object that contains a x property.

To solve you problem, you have to replace d.x to d[0] (is the first element of the array).

d3.selectAll("circle")
  .attr("fill", function (d) {
    console.log(linePosition)
    // console.log(attr("cx"));
    if (d[0] <= (linePosition)) {
      return lowColor
    } else {
      return highColor
    }
  })
  ;