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
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
}
})
;