javascript - 根据 d3 中文本的上下文设置文本样式

Question

我想知道是否有一种方法可以根据文本本身的上下文在 d3 中设置文本样式？

我有一段 d3 代码，它循环遍历项目列表，并在鼠标悬停时将它们附加到 DOM，因此当鼠标沿着图表移动时，列表会更新很多。我想根据里面的“避免”或“目标”文本将带有类系数方向的 p 标签着色为红色或绿色，但我目前只将所有内容着色为红色？有没有办法适本地访问文本，以便我的条件有效？

    d.features.forEach(function(m){
      d3.select("#showdata")
        .style("display", null)
        .append("p")
        .attr("class", "coeff-direction")
        .text(m.coeffDirection + ' ')
        .style("color", function(d) {
          if ("Avoid") {
            return "red"
          } else {
            return "Green"
          }
        })
        .append("span")
        .attr("class", 'feature-description')
        .text(m.featureDescription)
    })

这是一个包含所有代码的 JSFiddle:JSFiddle

Answer 1

问题是颜色函数中没有传递任何内容。您只需检查与设置文本相同的变量 - m.coeffDirection。所以你的 if block 需要替换为:

          if (m.coeffDirection === "Avoid") {
            return "red"
          } else {
            return "Green"
          }

找到一个可用的 JSFiddle here .