如何选择列表中倒数第二个标签？

Question

我是前端开发和使用 d3.js 的新手。 我在选择标签列表中的某个标签时遇到问题。

我创建了一些图表，我需要向某些节点添加图像。 我尝试使用d3.select('g')选择所需的标签，但这会选择第一个标签。 但我认为最大的问题是标签的名称相同，例如我不知道如何选择倒数第二个标签。

这是我的 HTML 代码（简短版本）：

<svg _ngcontent-c1="" width="1366" height="99">
   <gr _ngcontent-c1="" ng-reflect-zoomable-of="[object SVGSVGElement]">
      <g _ngcontent-c1="" _nghost-c2="" ng-reflect-link="[object Object]">
         <line _ngcontent-c2="" class="link" x1="1" y1="-2" x2="3" y2="-1"> </line>
      </g>
      <g _ngcontent-c1="" _nghost-c2="" ng-reflect-link="[object Object]">
         <line _ngcontent-c2="" class="link" x1="5" y1="2" x2="9" y2="4"> </line>
      </g>

   <g _ngcontent-c1="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]">
      <g transform="translate(3,4)">
         <text class="node-name" x="13" y="-3" font-size="20px">one</text>
      </g>
   </g>

   <g _ngcontent-c1="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]">
      <g transform="translate(5,6)">
             <text class="node-name" x="13" y="-3" font-size="20px">two </text>
          </g>
       </gr>

我尝试添加图像：

var svg = d3.select('svg').select('gr').select('g')
  .append('svg')
  .attr('width', 64)
  .attr('height', 64)
  .style('border', '1px solid black');
var imgs = svg.selectAll('image').data([0]);
imgs.enter()
  .append('image')
  .attr('xlink:href', '/assets/ToNode.png')
  .attr('width', '64')
  .attr('height', '64');

Answer 1

仅从标题判断您的问题是重复的， :last-child是显而易见的选择。 有几个重复的目标，就像这个。 但是，没有答案显示如何选择倒数第二个元素。 实际上，如果您在d3.js标签中搜索penultimate ，您的问题就是唯一的结果。

对于按给定索引选择元素:nth-child()是最常见的选项，或者，因为您从末尾开始计数， :nth-last-child() 。 但我想给你一个答案，展示如何结合使用第二个和第三个参数（大多数 D3 方法）。

在几个 D3 方法（如filter ，我将在本答案中使用）中，第二个参数是元素相对于选择的索引，而第三个参数是当前组或节点，它们构成该选择。 这些参数通常命名为i和n ，但您可以随意命名它们。 这里的重要信息是n.length给了我们元素的数量。

因此，如果我们选择所有<g>元素，我们可以使用以下方法获得倒数第二个：

yourSelection.filter(function(_, i, n) {
    return i === n.length - 2
  })

在这里，我使用n.length - 2因为索引是从零开始的，因此n.length - 1是最后一个元素。 此外， _只是一个约定，表明我们不在函数中的任何地方使用第一个参数。

这是一个演示，如果您检查 SVG，您会看到一个虚拟元素<foo>已添加到倒数第二个组中：

 d3.selectAll("g").filter(function(_, i, n) { return i === n.length - 2 }) .append("foo")

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg> <g></g> <g></g> <g></g> <g></g> <g></g> </svg>