d3-如何根據值更改文本的顏色（如果不是）

Question

我有一個數據集，該數據集基於我要打印的黑色或紅色“警告：joe今天已經觀看了14只貓的視頻”的值。 如果值大於10，則為紅色。 在使用d3或html格式時，我該怎么做？

var dataset = [14, 5, 26, 23, 9];
d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .style('fill', 'darkOrange')
    .text(function(d, i){
        for (i=0; i<5; i++)
        {
            result = "Warning: Joe watched " + d + " cat videos today";
        }
        return result;
    });

需要它看起來像這樣

Answer 1

看一下這個

添加樣式屬性以根據數組的值更改文本的顏色

.style("color", function(d, i) {
      return d > 10 ? "#ff0000" : "#000";
    })

並在.text（function（d，i）{}中添加else來根據條件更改文本，請參見我的答案

 var dataset = [14, 5, 26, 23, 9]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .style('fill', 'darkOrange') .style("color", function(d, i) { return d > 10 ? "#ff0000" : "#000"; }) .text(function(d, i){ for (i=0; i<dataset.length; i++) { if(d > 10) { result = "Warning: Joe watched " + d + " cat videos today"; } else { result = "Joe watched " + d + " cat videos today"; } } return result; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script>