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

【问题标题】：D3 Data Binding - When to put brackets around dataD3 数据绑定 - 何时在数据周围放置方括号
【发布时间】：2016-12-24 05:14:49
【问题描述】：

我正在查看多个与此类似的 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()...

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

有人能解释一下为什么这里有必要吗？什么时候我们应该在已经是数组对象的地方加上括号？

谢谢。

【问题讨论】：

您测试的代码示例是否使用了旧版本的 d3.js？
有趣的是，第二个例子 (.data(data)) 尽管你说你“有时”看到它，但它是迄今为止最常见的例子。我提供了一个答案，但如果您指定您必须放置额外的一对括号的特定情况会更好，这样我们可以给您更详细的解释。
我认为您的回答有帮助，但这里是示例：
对不起，我无法编辑我以前的评论并过早按回车：我认为您的回答有帮助，看起来我正在查看的示例正在执行 svg = div.selectAll("svg" ).data([数据]);因此，如果我理解正确，这意味着它将整个数据数组绑定到 svg，而如果您不包含括号，它将创建 data.length 个 svg 对象并将数组的每个元素绑定到不同的 svg。
视情况而定。将这些数据绑定到 SVG 后，您是如何使用这些数据的？这是最重要的细节。

标签： javascript d3.js data-binding

【解决方案1】：

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

一个函数
一个数组
什么都没有（当它充当吸气剂时）。

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

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

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

你可以简单地写：

.data(data)

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

检查一下：

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

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

现在，同样的代码，多了一对括号：

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

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

在第一个 sn-p 中，创建了 3 个 div。对于每一个，一个字符串数据被传递给段落（d3 将把每个字符串，比如"foo" 转换成一个数组，比如["f", "o", "o"]，你会得到每个 div 的 3 个段落）。

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

【讨论】：