获取绑定到 dom 个元素的数据

Question

我目前正在使用 d3.js 学习数据可视化。我正在使用 d3.js 站点上的教程。我在必须检索绑定到 DOM 元素的数据的部分。我完全按照他们展示的那样做了，但我无法从中获取数据。这是开头的代码：

var theData=[1,2,3]
var p= d3.select("body")
.selectAll("p")
.data(theData)
.enter()
.append("p")
.text("hello")

这显示：

你好
你好
你好

现在，在网站上，它告诉我输入以下代码以获取绑定的数据，即 1,2 和 3。

var theData=[1,2,3]
var p= d3.select("body")
.selectAll("p")
.data(theData)
.enter()
.append("p")
.text(function (d) { return d; } )

即使在这样做之后，页面也没有改变，就像它应该的那样：

1
2
3

它保持不变（它一直显示三个你好）。

如何取回数据？

Answer 1

当我尝试你的代码时，它有效（但是，我完全赞成漂亮 javascript，所以我在适当的时候添加了“;”）。

我建议检查浏览器开发人员工具上的控制台（也许已经显示错误）并将您的代码更改为如下内容：

var theData=[1,2,3];

var p= d3.select("body")
.selectAll("p")
.data(theData)
.enter()
.append("p")
.text(function (d) { 
    console.log("checking d");
    console.log(d);
    return d; 
} );

如果您在控制台中至少看不到 "checking d"，那就太奇怪了...

Answer 2

当只使用这个时:

var theData2 = [ 1, 2, 3 ]

var p2 = d3.select("body").selectAll("p")
  .data(theData2)
  .enter()
  .append("p")
  .text( function (d) { 
      console.log(d);
      return d; } );

有效，您使用的是您不应该使用的同名变量

http://jsfiddle.net/cwqwbw3u/1/

Answer 3

当我们的数据集包含的项目多于可用的 DOM 元素时，多余的数据项将存储在该选择的子集中，称为输入选择。当您第二次尝试使用 enter 时，已经有 3 个元素，因此没有项目存储在输入选择中。您应该为这两个任务使用相同的输入选择。

var theData=[1,2,3]
var p = d3.select("body")
  .selectAll("p")
  .data(theData);

p.enter()
  .append("p")
  .text("hello");

p.enter()
  .append("p")
  .text(function (d) { return d; } );

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

获取绑定到 dom 个元素的数据

Obtaining data bound to dom elements

javascript

d3.js