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 bodyvar svg = body.append("svg") // returns a selection of a newly created svgbody仍然是身体的选择 - 附加的东西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 elementvar path = area.append('path') // returns a selection of a new path elementpath.attr('d', somePathData) // modifies a path element最后，如果我们不再需要修改路径，我们就不需要使用变量来存储它，我们可以这样做：var area = svg.append('g') // returns a selection of a new g elementarea.append('path') // returns a selection of a new path element    .attr('d', somePathData) // modifies the selection of the path element