d3 使用 selectAll().data().enter().append() 连续创建节点

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 不能以数字开头。