时间戳

首页 > 解决方案 > 在 d3 v4 中包含多色标签

d3.js - 在 d3 v4 中包含多色标签

问题描述

我正在尝试根据条件为 d3 图表的同一轴中的刻度标签文本分配不同的颜色，

var input = ["Vegetable", "Grains", "Fruits", "Ham"]
var ch = yaxis.selectAll("text");
                
                ch.style( "fill", function()    {
                    for(var i=0; i<input.length; i++)   {
                        if(input[i].indexOf('Fruit') != -1) {
                            return "black";
                        }
                        else    {
                            return "blue";
                        }
                    }
                })

我的 y 轴将有来自输入数组的 4 个刻度。但我可以看到，它只适用一次，不考虑其他条件。

有什么办法，我可以在同一轴上有不同的颜色标签文本？

更新：我能够通过选择所有轴刻度然后更改其样式来实现这一点，

.style( "fill", function(d) {
            for(var i=0; i<obj.length; i++) {
                if(d.indexOf('*') == -1)    {
                                            return "black";
                                        else    {
                                            return "red";
                                        }
                                    }
                                }```

标签： d3.js

解决方案

不确定我是否正确理解了您的想法，但是如果您希望包含“水果”的刻度用黑色填充，而其他刻度用蓝色填充，那么您的函数逻辑是错误的。

您不必迭代输入数组，只需将每个文本中绑定的数据传递给函数，并检查它是否包含“水果”字符串。

如果这不是你的意思，请更清楚地提供你的意图。

<!DOCTYPE html>
<meta charset="utf-8">
<body>      
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

let input = ["Vegetable", "Grains", "Fruits", "Ham"]

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
var y = d3.scaleBand()
          .range([height, 0])
          .padding(0.1);
          
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

y.domain(input.map(function(d) { return d; }));

// add the y Axis
let yaxis = svg.append("g")
              .attr("class", "yaxis")
              .call(d3.axisLeft(y));


let ch = yaxis.selectAll("text");
                
ch.style( "fill", function(d)    {
    // console.log(d);
    if(d.indexOf("Fruit") !== -1) return "black";
    else return "blue"

})

</script>
</body>

推荐阅读