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＆amp; 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，所以我添加了＃39 ;;＆＃39;当适用时）。

我建议在浏览器开发人员工具上查看控制台（可能已经显示错误）并将代码更改为：

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; 
} );

如果你至少没有看到＆＃34;检查d＆＃34;那将是非常奇怪的。在你的控制台......

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元素的数据

3 个答案: