d3 可拖动阈值，d.x 未定义

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

在第 133 行，我的 if 语句不起作用。 d.x 始终未定义，我不确定为什么。目标是使图形点在阈值位于它们前面时改变颜色。谢谢

Answer 1

d 不是一个对象，是一个有两个值的数组。这就是为什么如果你使用 d.x 输出是未定义的，因为它不是一个包含 x 属性.

的对象

为了解决你的问题，你必须将 d.x 替换为 d[0] （是数组的第一个元素）。

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