为图例添加动态色彩标签

Adding labels to a legend with dynamic colours

本文关键字：色彩 标签 动态 添加      更新时间：2023-09-26

我目前正在使用d3.js制作一个多线图。我目前正在制作一个简单的图例，通过将字体设置为图中相应的颜色来描述每一行客户端名称及其行颜色。

我的测试数据看起来像这样：

var data = [{
                    "Client": "ABC",
                    "sale": "202",
                    "time": "09:00"
                }, {
                    "Client": "ABC",
                    "sale": "215",
                    "time": "11:00"
                }, {
                    "Client": "ABC",
                    "sale": "179",
                    "time": "12:00"
                }, {
                    "Client": "ABC",
                    "sale": "199",
                    "time": "13:00"
                }, {
                    "Client": "ABC",
                    "sale": "134",
                    "time": "15:00"
                }, {
                    "Client": "ABC",
                    "sale": "176",
                    "time": "16:00"
                }, {
                    "Client": "ABC",
                    "sale": "197",
                    "time": "17:00"
                }, {
                    "Client": "XYZ",
                    "sale": "100",
                    "time": "09:00"
                ...etc
                }];

通过使用d3.nest（），我已经按照json的客户端名称对其进行了排序，现在它产生了如下所示的数据：

[{
"key": "ABC",
"values": [{
    "Client": "ABC",
    "sale": "202",
    "year": "2000"
}, {
    "Client": "ABC",
    "sale": "215",
    "year": "2002"
}, {
    "Client": "ABC",
    "sale": "179",
    "year": "2004"
}, {
    "Client": "ABC",
    "sale": "199",
    "year": "2006"
}, {
    "Client": "ABC",
    "sale": "134",
    "year": "2008"
}, {
    "Client": "ABC",
    "sale": "176",
    "year": "2010"
}]
}, {
    "key": "XYZ",
    "values": [{
        "Client": "XYZ",
        "sale": "100",
        "year": "2000"
    }, { ...etc

我在上面生成的新json称为"dataGroup"。我正在尝试使用迭代来在DOM上用客户端名称填充div，这些名称是我使用d3.scale.category10（）赋予它们的颜色；

这是我当前的div代码：

dataGroup.forEach(function(d, i){
        d3.select("#value")
            .append("text")
            .data(dataGroup)
            .style("color", function(d, i){
                return colours(i);
            })
            .text(function(d){
                return d.key;
            });
    });

到目前为止，所做的只是返回第一个客户端（ABC），然后停止。据我所知，我认为d3会遍历dataGroup中的所有键，但事实并非如此。我试着在文本函数中放入一个for循环，但这也没有帮助。

有什么建议吗？

这里有一个问题。如果数据绑定正确，D3将进行迭代。这就是你可以做的：

首先，选择所需的div或span：

var clientText = d3.select("#value");

然后，为文本创建一个变量，并按以下顺序绑定来自dataGroup的数据：

var texts = clientText.selectAll(".clients")
  .data(dataGroup)
  .enter()
  .append("text");

我们称之为"选择数据输入附加"序列。

然后，您可以执行代码的其余部分：

texts.style("color", function(d, i){
            return colors(i);
        })
        .text(function(d){
            return d.key;
        });

这将按顺序打印所有的名字，而不是最幸福的结果。

这是小提琴：https://jsfiddle.net/uwLcrzxk/

尝试将.data(dataGroup)移动到.append("text")之前，然后添加.enter()，如下所示：

d3.select("#value")
            .data(dataGroup)
            .enter()
            .append("text")
            .style("color", function(d, i){
                return colours(i);
            })
            .text(function(d){
                return d.key;
            });
相关文章：