Question

我希望能够将每个数据对象（在本例中为'moreData'数组）放在一个组元素中。因此，在下面的简化示例中，我将最终得到三个组，其中包含2个或3个圆圈。

我正在使用节点D3在对每个（第二个）的调用中提供'this'来构造选择器。虽然对每个的第一次调用是正确的（console.log告诉我）...我创建的选择器显然没有做正确的事情，因为它在body元素之外创建5个圆圈而第二个console.log从不报告第一个元素

这是一个小提琴simple use of this

从这个简单的三个对象数据集中：

data = [{'data'：10，'moreData'：[1,2]}，{'data'：12，'moreData'：[3,4,5]}，{'data'：6 ，'moreData'：[7,8,9]}];

我期待并获得三组，但组内没有圈子。

var svg = d3.select("body").append("svg");
var shapes = svg.selectAll("g")
                .data(data).enter();
shapes.append("g").each(add);
function add(d, i) {
    console.log(i, d);
    // this is where we go south!!
    d3.select(this).data(d.moreData).enter() // help with this!!
    .append("circle")
    .attr("cx", function (d, i) {
        return (i + 1) * 25;
    })
    .attr("cy", 10)
    .attr("r", 10)
    .each(function (d, i) {
        console.log(i, d); // this is not good!
    })

感谢您对我做错了什么的见解.... 上面的小提示没有显示输出，但如果你检查'结果'选项卡，你可以看到正确的空组和身体标签外的圆形元素...至少在Chrome中。

Answer 1

在设置数据之前，您需要选择一组空的圆圈。

现在，您正在致电：

d3.select(this).data(d.moreData)

将该行替换为：

d3.select(this).selectAll("circle").data(d.moreData)

一般d3输入范例是选择一个组 - ＆gt;将数据附加到该组 - ＆gt;使用enter / exit，其中enter将为具有数据但没有DOM元素的组中的每个项运行，并为具有DOM元素但没有数据的每个元素退出。

Fiddle.

此外，您应该为i和d使用不同的变量作为内部函数，因为现在它们与外部函数上的变量相同。（或许改用function(D, I)。）

D3从里面创建一个选择器

1 个答案: