如何選擇列表中倒數第二個標簽？

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>