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

我们称之为“select-data-enter-append”序列。

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

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

D3.js为动态颜色

2 个答案: