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")' 操作，而在第二个示例中（成功的）示例，我对每个文本和 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 elements

x_axis 由链上最后一个值 return 定义。所以，上面的 x_axis 是文本元素的选择，文本元素不能（在本例中不）包含任何子路径或行元素，因此 x_axis.selectAll('line, path') 将 return 一个空选择。因此，为空选择设置任何属性都不会改变任何内容。

第二个代码块有效，因为 x_axis 仍然是 g 的选择 - selection.call() returns 与 .call() 链接到的 selection 相同，例如 .attr() 或 .style()，以及其他方法。而 selectAll() 和 select()，以及其他方法，return 新选择。

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

javascript D3 V6, struggling with chained syntax, specifically effects of '.call' and 'selectAll'

javascript

selectall

d3.js