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

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)

但是,在某些情况下,当一个元素继承父组的数据时,你必须将它包装在一对额外的括号中(查看我最近写的这个答案).我们这样做是因为子元素将其数据作为函数获取,其中父元素的数据被传递.

检查一下:

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

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

现在,相同的代码,带有一对额外的括号:

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

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

在第一个片段中,创建了3个div.对于每一个,字符串数据被传递给段落(d3将转换每个字符串,例如"foo",在一个数组中,例如["f", "o", "o"],每个div将获得3个段落).

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