d3.js - 如何在d3中获得父选择？

Question

要创建此 DOM:

<g>
    <rect></rect>
    <circle></circle>
</g>

来自 .enter()选择，我试过:

someUpdate.enter()
  .append('g')
    .attr('class', 'my-group')
    .append('rect')
      .attr('class', 'my-rect')
    // I'd like to get the .parent() here
    .append('cicle')
      .attr('class', 'my-circle')

这不起作用，因为 .append('rect')将选择更改为 rect .

打破这个:

const update = someUpdate.enter()
  .append('g')
    .attr('class', 'my-group')

update
  .append('rect')
    .attr('class', 'my-rect')

update
  .append('cicle')
    .attr('class', 'my-circle')

作品。

但是，我想知道是否有更清洁的方法？

Answer 1

D3 中没有用于遍历 DOM 的方法，例如jQuery 的 .parent() .因此，您将其分解为单独的语句的方式将是正确的方法。

另一方面，按照您最初建议的方式进行操作并非完全不可能。就在昨天，我发布了一个 answer至 "D3.js - what is selection.call() returning?"解释如何 selection.call() 将准确返回它被调用以允许方法链接的选择。记住这一点，你可以像下面这样:

d3.select("svg").selectAll("g")
  .data([1])
  .enter().append('g')
    .call((parent) => parent.append('rect')
                        .attr("fill", "red")
                        .attr("width", 100).attr("height", 100))
    .call((parent) => parent.append('circle')
                        .attr("fill", "blue").attr("r", 50));

<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>

.call() 调用的两个函数将通过之前输入的相同选择 <g>元素，在这种情况下恰好是父元素。

尽管可以通过这种方式做到这一点，但该解决方案有其缺点。首先，对于任何经验丰富的 D3 开发人员来说，它看起来有些奇怪和尴尬，如果您想与他人共享或讨论您的代码，这可能会使问题复杂化。其次，即使我将参数命名为 parent ，在这种特殊情况下，它仍然不是真正等同于 jQuery 的 .parent()方法。它只会传入并返回完全相同的选择，无论是父选择还是其他选择。