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

我目前正在使用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称为“数据组”。我试图使用迭代在我的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会遍历数据组中的所有键，但事实并非如此。我曾尝试在文本函数中加入for循环，但也没有效果

有什么建议吗？

尝试在.appendtext之前移动.datagroup，然后添加.enter，如下所示：

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

---

这里有个问题。如果数据绑定正确，D3将迭代。这是您可以做到的：

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

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

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

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

这将按顺序打印所有名称，而不是最漂亮的结果

---

这是小提琴：

这似乎没有什么不同。它仍然只拾取第一个键。您是否尝试过使用enter键，如@Gerardo所述？我也用这一行更新了我的答案。现在你有了一个更好的选择数据输入附加模式。添加.enter看起来不会在div中显示任何内容。好的，我尝试了这个方法，在这个例子中用我的divs类的名称替换svganchor值，但现在图例中没有显示任何内容。我遗漏了什么吗？对不起，我的错，我同时写了3个代码。所有的钥匙都印给我了。请注意，我在你有颜色的地方写了颜色。你能分享一个能工作的plunker或jsfiddle吗？恐怕不行。所需输出应为数据的3个不同客户端，即ABC、XYZ和PQR。到目前为止，它只显示了3次ABC。@MarkO'Hare，非常抱歉，我同时做了几件事。我的错。我更新了我的答案，它现在起作用了。