问D3(幕后)-area.style.append工作，而area.style + area.append不工作。为什么？

EN

我不确定我是否正确理解了你的问题。但我会在这里给出一个答案。

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

我将从一开始就开始，因为您第一次假设附加SVG。

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

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

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

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

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

最后，不能更改D3选择：

选择是不变的。所有影响所选元素(或它们的顺序)的选择方法都返回一个新的选择，而不是修改当前的选择。(来源)

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

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

现在，看看您对这一行的初步评估：

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

你的解释是：

我将选择'body‘并附加一个'svg’。并将其存储为一个名为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