d3-如何根据值更改文本颜色（如果不是）

Question

我有一个基于我想要打印的值的数据集＆＃34;警告：乔今天观看了14个猫视频＆＃34;无论是黑色还是红色。如果值大于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）{}中添加if else以根据条件更改文本在我的回答中看到

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;