时间戳

首页 > 解决方案 > 在 D3 中将两个具有相同类的 g 分组

d3.js - 在 D3 中将两个具有相同类的 g 分组

问题描述

我如何将两个 g 分组到同一个班级

<g transform="translate(30,20)">
    <g class="y axis" transform="translate(670 ,0)" style="fill: red;">
       <g class="tick" transform="translate(0,445)" style="opacity: 1;">
          <line x2="6" y2="0"></line>
          <text dy=".32em" x="9" y="0" style="text-anchor: start;">0</text>
       </g>
       <g class="tick" transform="translate(0,356)" style="opacity: 1;">
          <line x2="6" y2="0"></line>
          <text dy=".32em" x="9" y="0" style="text-anchor: start;">20</text>
       </g>
       <g class="tick" transform="translate(0,267)" style="opacity: 1;">
          <line x2="6" y2="0"></line>
          <text dy=".32em" x="9" y="0" style="text-anchor: start;">40</text>
       </g>
    </g>
    <g class="legend" transform="translate(0,0)">
       <rect x="752" width="18" height="18" style="fill: rgb(208, 116, 60);"></rect>
       <text x="746" y="9" dy=".35em" style="text-anchor: end;">Boys</text>
    </g>
    <g class="legend" transform="translate(0,20)">
       <rect x="752" width="18" height="18" style="fill: rgb(160, 93, 86);"></rect>
       <text x="746" y="9" dy=".35em" style="text-anchor: end;">Girls</text>
    </g>
 </g>

我想用类名图例将两个 g 包装在另一个带有类名包装器图例的 g 中

这是图例的当前代码

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

标签： d3.jssvg

解决方案

只需预先附加 ag ：

  var legend = svg.append('g')
      .classed('wrapper-legend', true)
      .selectAll(".legend")
      .data(color.domain().slice().reverse())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

请注意，在这种情况下，您的变量legend仍将是两个g.legend元素的选择，而不是g.wrapper-legend

推荐阅读