area.style.append 有效，而 area.style + area.append 无效

Question

我有一个关于 d3 的性质的问题，我认为关于 d3 的细节非常深入。据我了解，d3 中的变量声明，例如， var svg = d3.select('boby').append('svg')方法，“我将选择'body'并附加'svg'。并将其存储为一个名为'svg'的变量。”代替“可变svg是'选择正文并附加svg”我之所以这么想是因为如果第二个是正确的解释，每次我输入 svg 时，它都会每次都附加 svg。所以我认为我的第一个解释是正确的。然而，如果是这种情况，下面的代码应该可以工作。var area = svg.append('g')area.append('path')area.attr('d').data(somedata)因为，我添加了“g”，然后将其存储为名为“area”的变量，然后在此处添加了“path”，然后在此处添加了属性，然后为此绑定了一些数据。但是，它没有成功。我当时尝试的是，贴花另一个变量并在该新变量之后添加其他条件，例如var uarea = area.append('path')uarea.attr('d').data(somedata)结果很完美。为什么我的第一种方法没有奏效，而最后一种方法奏效。我认为这个问题更多的是关于d3幕后发生的事情。我希望有人可以在 d3 中给我一些启蒙。

Answer 1

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

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

---

由于您对附加SVG.

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

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

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

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

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

最后，不能更改 D3 选择：

选择是不可变的。所有影响选择哪些元素（或其顺序）的选择方法都会返回一个新选择，而不是修改当前选择。（来源）

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

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

---

现在，看看你对这条线的初步评估：

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

还有你的解释：

我将选择 [the] 'body' 并附加 [a] '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