使用动态颜色向图例添加标签

Question

我目前正在使用 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 循环，但这也无济于事。

有什么建议吗？

Answer 1

这里有问题。如果您正确绑定数据，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/

Answer 2

尝试将.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;
            });