Question

所以我试图绕过d3的选择部分，我试图通过一个简单的例子来测试它。

我有一个数组，我正在从数组中绘制圆圈。

数组：

var data = [ 37, 36, 31, 46 ];

但是如果我的数组看起来像这样：

var data = [ [37, 36, 31, 46], [24, 32, 55, 23] ];

所以它已经附加了一个＆＃34; g＆＃34;对于每个子阵列，但我如何为子阵列中的每个数字添加一个圆圈和一个文本元素？

http://jsfiddle.net/jakob_/c2h6F/1/

    var svg = d3.select("svg");

    var data = [ 37, 36, 31, 46 ];

    var groups = svg.selectAll("g")
        .data(data)
        .enter()
        .append("g")

    groups.attr("transform", function(d, i){
        var x = 78 * i + 100;
        var y =  i + 100;
        return "translate(" + [x, y] + ")";
    })

    var circles = groups.append("circle")
        .attr({
            cx: function(d, i){
                return 0
                //return i * 40 + 100;
            },
            cy: function(d, i){
                return 0
                //return i * 30 + 100;
            },
            r: function(d, i){
                return ((d / Math.PI) / 2) * 5;
            },
            fill: "red",
        })

    var label = groups.append("text")
        .text(function(d){
            return d;
        })
        .attr({
            "alignment-baseline": "middle",
            "text-anchor": "middle"
        })

Answer 1

在代码的groups部分中，您可以使用其他数据参数来返回绑定到父元素的数据的子数组...例如：

var data = [ [37, 36, 31, 46], [24, 32, 55, 23] ];

var groups = svg.selectAll('g')
    .data(data)
    .enter()
    .append('g');

var circles = groups.selectAll('circle')
    .data(function(d) { return d; })
    .enter()
    .append('circle');

var labels = groups.selectAll('text')
    .data(function (d) { return d; })
    .enter()
    .append('text');

当圆圈和标签上出现'enter（）'函数时，它将遍历已绑定到组父级的数据的子数组。

从子数组d3.js添加元素

1 个答案: