javascript D3 V6，与链式语法作斗争，特别是'.call'和'selectAll'

Question

下面是两个类似 D3 代码的示例，一个有效，另一个无效。在此示例中，我想更改轴的线条颜色 -

这不起作用，轴的描边颜色线不会更改为绿色 -

   var x_axis = svg.append("g")

      .attr("class", "axis")

      .attr("transform", `translate(20, ${height - 50})`)

      .call(d3.axisBottom(ordinalScale))

         .selectAll("text")

         .attr("transform", "translate(-5,5)rotate(-45)")

         .style("text-anchor", "end")

         .style("font-size", "8px")

         .style("fill", "#102040");

   x_axis.selectAll("line, path").style("stroke", "green");

但这有效，线条变为绿色：

   var x_axis = svg.append("g")

      .attr("class", "axis")

      .attr("transform", `translate(20, ${height - 50})`)

      .call(d3.axisBottom(ordinalScale));

   x_axis.selectAll("text")

      .attr("transform", "translate(-5,5)rotate(-45)")

      .style("text-anchor", "end")

      .style("font-size", "8px")

      .style("fill", "#102040");

   x_axis.selectAll("line, path").style("stroke", "green");

不同之处在于，在第一个（失败的）示例中，我将 'selectAll("text")' 操作链接到 'call(d3.axisBottom)' 和以下 'selectAll("line, path")' 操作表达式，在第二个（成功的）示例中，我对每个文本和行/路径操作都有以下单独的表达式。

这并不重要，因为我可以获得我想要的效果，但在我看来它们应该是等效的，但显然我不理解语法的一些微妙之处。这与“.call”操作有关吗？

Answer 1

第一个代码块不起作用，因为x_axis它不包含您认为的内容。  var x_axis = svg.append("g")   // returns a selection of a g element     .attr("class", "axis")      // returns the same selection of a g     ...     .call(d3.axisBottom(ordinalScale)) // returns the same selection of a g     .selectAll("text")                 // returns a new selection of text elements     ...                                     .style("fill", "#102040");         // returns the same selection of text elementsx_axis由链返回的最后一个值定义。因此， x_axis上面是文本元素的选择，文本元素不能（在本例中不）包含任何子路径或行元素，因此x_axis.selectAll('line, path')将返回空选择。因此，为空选择设置任何属性都不会改变任何内容。第二个代码块之所以有效，是因为x_axis它仍然是 ag 的选择 - 返回链接到的相同selection.call()内容，例如or ，以及其他方法。而 和，以及其他方法，返回新的选择。selection.call().attr().style()selectAll()select()