javascript - 将不同数量的元素附加到每个组

Question

我对 d3 很陌生而且我正在尝试学习它如何处理多维数组。

我需要根据嵌套数组的长度将不同数量的元素附加到组中：

Var data = [
            [1,2,3],
            [1,2,3,4],
            [1,2,3,4,5]
           ];

基于这个例子，我需要有 3 个组；第一个有 3 个元素，第二个有 4 个，第三个有 5 个。

遍历分配给每个组的基准的正确方法是什么？d3 是否提供这样做的方法？

Answer 1

首先循环遍历组然后遍历每个组中的元素的简单演示：

var data = [
    [1,2,3],
    [1,2,3,4],
    [1,2,3,4,5]
];

var viz = d3.select("#viz");
var groups = viz
                .selectAll("div.group")
                .data(data, function(d, index) { 
                   return d.key; 
                })
                .enter()
                .append("div")
                .classed('group', true)
                .text(function(d, i) { return 'group ' + i});

var nodes   = groups
                .selectAll("div.node")
                .data(function(d, index){ 
                   return d;
                })
                .enter().append("div")
                .classed('node', true)
                .text(function(d, i) { return d});

作为要点，为了清晰起见，使用 css 样式 https://gist.github.com/widged/5203275

如果这不能真正回答您的问题，请告诉我