javascript - d3(幕后)-area.style.append 有效，而 area.style + area.append 无效。为什么？

Question

你好，我有一个关于 d3 的性质的问题，我认为这是关于 d3 的非常深入的细节。

据我了解，

d3 中的变量声明，如

 var svg = d3.select('boby').append('svg')

意味着，

"I'm going to select 'body' and append 'svg'. and store this as a variable called 'svg'."

代替

"variable svg is 'to select body and append svg"

我之所以这样想是因为
如果第二种解释正确，

每次我输入 svg，它都会附加 svg。

所以我认为我的第一个解释是正确的。

但是，

如果是这样的话下面的代码应该可以工作。

var area = svg.append('g')

area.append('path')

area.attr('d').data(somedata)

因为，我添加了“g”
然后将其存储为名为“area”的变量
然后在那里附加“路径”
然后在那里添加了属性
然后为此绑定(bind)了一些数据。

但是，它没有成功。

当时我尝试的是，

贴标另一个变量并在该新变量之后添加附加条件，例如

var uarea = area.append('path')

uarea.attr('d').data(somedata)

结果很完美。

为什么我的第一种方法行不通，而最后一种方法行得通。我认为这个问题更多的是关于 d3 中幕后发生的事情。我希望有人能给我一些 d3 的启蒙罢工。

Answer 1

我不确定我是否正确理解了您的问题。但我会尝试在这里提供答案。

简短的回答是:不，您正在测试的假设是不正确的，因为它假设 .append() 修改了现有的选择。 area 仍然是 g 的选择，无论您将什么附加到 area。

---

由于您关于附加 SVG 的第一个假设，我将从头开始。

D3 选择方法经常可链接，因为它们经常用于返回选择。通过返回选择，可以对返回值使用另一种选择方法，从而允许链接。

但是选择方法返回的选择并不总是相同元素的选择——也就是说它可能是不同的选择。

如果使用 .style()、.attr()、.each()、.call(), .on(), .raise(), .html(), .text() > 等方法设置属性、样式等，返回值是原始选择本身。通常可用于返回当前选择的方法是那些修改有关选择的某些内容的方法。 如果不设置值，这些方法中的许多方法可用于返回值而不是选择。

如果使用诸如 .append()、.enter()、.exit()、.merge 之类的方法(), .filter(), .select(), .selectAll() 等返回值是一个不同的选择。

当使用链来定义变量时，分配的值是链中最后一项的返回值。

最后，无法更改 D3 选择:

Selections are immutable. All selection methods that affect which elements are selected (or their order) return a new selection rather than modifying the current selection. (source)

一旦我们将选择定义为由某些元素组成，我们就无法更改它。我们只能重新定义具有不同选择的变量。

D3v3 在这方面略有不同，但不是为了您的问题

---

现在，看看您对这条线的初步评估:

var svg = d3.select('body').append('svg')

还有你的解释:

I'm going to select [the] 'body' and append [a] 'svg'. and store this as a variable called svg.

您的解释是正确的，让我们打破链接并使用两个变量来实现相同的事情以查看您正在使用的两个选择:

var body = d3.select("body") // returns a selection of the body
var svg = body.append("svg") // returns a selection of a newly created svg

body 仍然是主体的选择 - 将内容附加到 body 不会改变 body 是主体的选择。然后我们使用 svg 来存储新的选择:新添加的 SVG 的选择。稍后将任何项目附加到 svg 都不会改变 svg 成为 svg 的选择。

---

应用以上所有内容，我们可以看到一种方法，例如:

var area = svg.append('g') // returns a selection of a new g element, stored as `area`

area.append('path')        // returns a selection of a new created path element, but you don't store this reference, nothing is done with it.

area.attr('d', somePathData) // attempting to modify a g element instead of a path.

这不会像您预期的那样工作，area 仍然是 g 元素的选择:您这样定义它并且没有重新定义 area 进行一些不同的选择。 .append() 创建一个新的选择 - 除了创建路径之外您不会使用的选择。

如您所述，如果我们将 path 选择存储在一个新变量中，代码将按预期工作:

var area = svg.append('g') // returns a selection of a new g element

var path = area.append('path') // returns a selection of a new path element

path.attr('d', somePathData) // modifies a path element

最后，如果我们永远不需要再次修改路径，我们就不需要使用变量来存储它，我们可以这样做:

var area = svg.append('g') // returns a selection of a new g element

area.append('path') // returns a selection of a new path element
    .attr('d', somePathData) // modifies the selection of the path element