Question

我有一个像

这样的表格数据

ID，名称，价值
001，ABC，123
002，DEF，345

我希望将它显示为：

<div id="001">
<h1>ABC</h1> <p>123</p>

我尝试了以下内容：

var divs = root.selectAll("div").data(data)
            .enter()
            .append("div")
            .attr("id", function (d) { return d.ID; })
            .append("h1")
            .text(function (d) { return d.Name; })
            .selectAll("div p").data(function (d) { return d; })
            .enter().append("p")
            .text(function (d) { return d.Value; })

然而它只显示第一级。我尝试了一些其他选项，但没有成功，要么不显示任何内容，要么显示每个元素中的所有值。

我感觉我错过了一些明显的东西，任何指针都会受到赞赏。

Answer 1

两个主要变化：

首先，您必须中断选择，将<h>和<p>元素追加到divs。因此，您将拥有与数据数组中的对象一样多的div。但是，对于每个div，您将附加一个<h>和一个<p>元素。现在，您可以<p>将<h>元素添加到<p>，而不是添加到div。
其次，您不应创建嵌套选择重新绑定数据（因为你不在这里有内部数组，但只有一个内部的对象数组）。如果你为每个div都有几个var divs = root.selectAll(null) .data(data) .enter() .append("div") .attr("id", function(d) { return d.ID; }); divs.append("h1") .text(function(d) { return d.Name; }); divs.append("p") .text(function(d) { return d.Value; });个元素，那就没有意义了，但是你没有。

所以，这应该是你的代码：

<div id="001">
    <h1>ABC</h1>
    <p>123</p>
</div>
<div id="002">
    <h1>DEF</h1>
    <p>345</p>
</div>

这就创造了这种结构：

var data = [{
  ID: "001",
  Name: "ABC",
  Value: "123"
}, {
  ID: "002",
  Name: "DEF",
  Value: "345"
}];

var root = d3.select("body");

var divs = root.selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .attr("id", function(d) {
    return d.ID;
  });

divs.append("h1")
  .text(function(d) {
    return d.Name;
  });

divs.append("p")
  .text(function(d) {
    return d.Value;
  });

以下是演示：

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

.toInt()

＆＃13;

使用数据绑定

1 个答案: