Question

我正在研究与此类似的多个D3代码示例：

var data = [1,2,3...];
var blah = d3.selectAll("#blah").data([data]).enter()...;

但有时候我会这样看：

var data = [1,2,3...];
var blah = d3.selectAll("#blah").data(data).enter()...

我写的所有代码都是第二种形式，我从来没有遇到过任何问题，但我在网上复制了第一种形式的代码示例，当我删除了[]时它没有用。

有人可以在这里解释为什么这里有必要以及何时应该在已经是数组对象的位置放置括号？

感谢。

Answer 1

在d3。 data()方法接受三件事：

功能
数组
什么都没有（当它充当吸气剂时）。

话虽如此，这就是问题所在：

在大多数情况下，您只需将["foo", "bar", "baz"]作为数据传递即可。所以，如果你有：

var data = ["foo", "bar", "baz"];

您可以简单地写一下：

.data(data)

但是，在某些情况下，当一个元素继承父组的数据时，你必须将它包装在一对额外的括号中（检查我写的this recent answer）。我们这样做是因为子元素将其数据作为函数获取，其中父元素的数据被传递。

检查一下：

＆＃13;

var data = ["foo", "bar", "baz"];

var body = d3.select("body");

var divs = body.selectAll(".divs")
	.data(data)
	.enter()
	.append("div");
	
var par = divs.selectAll("p")
	.data(d => d)
	.enter()
	.append("p")
	.text(d => d);

＆＃13;

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

＆＃13;

现在，相同的代码，带有一对额外的括号：

＆＃13;

var data = ["foo", "bar", "baz"];

var body = d3.select("body");

var divs = body.selectAll(".divs")
	.data([data])
	.enter()
	.append("div");
	
var par = divs.selectAll("p")
	.data(d => d)
	.enter()
	.append("p")
	.text(d => d);

＆＃13;

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

＆＃13;

在第一个片段中，创建了3个div。对于每一个，字符串数据被传递给段落（d3将把每个字符串，例如"foo"）转换为["f", "o", "o"]等数组，并且每个div都会得到3个段落）。

在第二个片段中，只创建了一个div（因为我们的数组的长度只有1），整个内部数组（["foo", "bar", "baz"]）被传递给段落。

D3数据绑定 - 何时在数据周围放置括号

1 个答案: