Question

我想知道有没有办法根据文本本身的上下文在d3中设置文本样式？

我有一大堆d3代码循环遍历项目列表并在鼠标悬停时将它们附加到DOM，因此当鼠标沿着图表移动时，列表会更新很多。我希望根据里面的文字说明＆＃34;避免＆＃34;或＆＃34;目标＆＃34;但是我目前只将红色一切都染成了什么？无论如何都要适当地访问文本，以便我的条件有效吗？

    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块需要替换为：

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

找到一个有效的JSFiddle here。

Answer 2

您的代码只会评估为true，因为字符串＆＃34;避免＆＃34;总是如此。

if ("Avoid") {
   return "red"
} else {
   return "Green"
}

也许您打算检查d的参数d === "Avoid"？

示例：

if (d === "Avoid") {
   return "red";
} else {
   return "green";
}

基于d3中文本上下文的样式文本

2 个答案: