Question

我目前正在尝试创建d3中数组提供的节点数量的2倍。我第二次尝试创建具有相同结构的节点时，不会创建节点。我对d3不太熟悉，无法理解为什么，我希望有人可以在我深入研究文档之前提供帮助。

实施例

data = [1,2,3,4]

var someTag = d3.select("svg")
.append("div")
.attr("id","outer-div");

// this successfully creates the elements
someTag.select("div")
.data(data)
.enter().append("div")
.attr("id", function(d) { return d; }

// this does not create the elements
someTag.select("div")
.data(data)
.enter().append("div")
.attr("id", function(d) { return d*10; }

目标是：

<div id="outer-div">
<div id="1"></div>
<div id="2"></div>
...
<div id="10"></div>
<div id="11"></div>
...
<div id="20"></div>
</div>

Answer 1

尝试选择不同的元素（使用selectAll代替select）：

someTag.selectAll("foo")
    .data(data)
    .enter().append("div")
    .attr("id", function(d) { return d; });

someTag.selectAll("bar")
    .data(data)
    .enter().append("div")
    .attr("id", function(d) { return d*10; });

您可以按字面意思选择不存在的元素，类或ID，就像我在此处使用foo和bar一样。

这是一个演示：

var data = [1,2,3,4]

var someTag = d3.select("body")
.append("div");

someTag.selectAll("foo")
.data(data)
.enter().append("div")
.html(d=>d);

someTag.selectAll("bar")
.data(data)
.enter().append("div")
.html(d=>d);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS ：我只是在这里回答你的问题，仅此而已，但我必须这样说：你的代码不会起作用。您无法将<div>附加到SVG。除此之外，ID不能以数字开头。

d3使用selectAll（）连续创建节点.data（）。enter（）。append（）

1 个答案: