我有一个数据集,基于我想要以黑色或红色打印“警告:乔今天观看了 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;
});
需要它看起来像这样
最佳答案
看看这个
添加样式属性以根据数组的值更改文本颜色
.style("color", function(d, i) {
return d > 10 ? "#ff0000" : "#000";
})
并在 .text(function(d, i){} 中添加 if 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>
关于javascript - d3-如何根据值更改文本颜色(如果有),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49993165/