简体   繁体   English

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

[英]How to select the second to last tag in a list?

I am new to frontend developing and working with d3.js.我是前端开发和使用 d3.js 的新手。 I have a problem with selecting a certain tag in a list of tags.我在选择标签列表中的某个标签时遇到问题。

I created some graphs and I need to add an image to certain nodes.我创建了一些图表,我需要向某些节点添加图像。 I tried to select the needed tag with d3.select('g') , but this selects the first tag.我尝试使用d3.select('g')选择所需的标签,但这会选择第一个标签。 But I think the big problem is that the tags are called the same, and I don't know how to select the penultimate tag for example.但我认为最大的问题是标签的名称相同,例如我不知道如何选择倒数第二个标签。

Here is my HTML code (short version):这是我的 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>

And my attempt to add an image:我尝试添加图像:

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');

Judging only by the title your question is a duplicate, :last-child being the obvious choice.仅从标题判断您的问题是重复的, :last-child是显而易见的选择。 There are several duplicate targets, like this one .有几个重复的目标,就像这个 However, there is no answer showing how to select the penultimate element.但是,没有答案显示如何选择倒数第二个元素。 Actually, if you search penultimate in the tag, your question is the only result.实际上,如果您在标签中搜索penultimate ,您的问题就是唯一的结果。

For selecting an element by a given index :nth-child() is the most common option, or, since you are counting from the end, :nth-last-child() .对于按给定索引选择元素:nth-child()是最常见的选项,或者,因为您从末尾开始计数, :nth-last-child() But I'd like to give you an answer showing how to use the second and third parameters (of most D3 methods) combined.但我想给你一个答案,展示如何结合使用第二个和第三个参数(大多数 D3 方法)。

In several D3 methods (like filter , which I'll use in this answer), the second parameter is the index of the element relative to the selection, while the third parameter is the current group, or nodes, which make up that selection.在几个 D3 方法(如filter ,我将在本答案中使用)中,第二个参数是元素相对于选择的索引,而第三个参数是当前组或节点,它们构成该选择。 Those parameters are normally named i and n , but you can name them anyway you want.这些参数通常命名为in ,但您可以随意命名它们。 The important information here is that n.length gives us the number of elements.这里的重要信息是n.length给了我们元素的数量。

So, if we select all <g> elements, we can get the penultimate one using:因此,如果我们选择所有<g>元素,我们可以使用以下方法获得倒数第二个:

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

Here, I'm using n.length - 2 because the indices are zero-based, therefore n.length - 1 is the last element.在这里,我使用n.length - 2因为索引是从零开始的,因此n.length - 1是最后一个元素。 Also, _ is just a convention that says that we are not using the first parameter anywhere in the function.此外, _只是一个约定,表明我们不在函数中的任何地方使用第一个参数。

Here is a demo, if you inspect the SVG you'll see that a dummy element <foo> was added to the penultimate group:这是一个演示,如果您检查 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM