javascript - D3.js 附加错误位置

Question

这是我的 DOM 结构的简化版本:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id=""
   viewBox="0 0 745 471">
  <defs
     id="defs3367" />
  <g
     style="display:inline"
     transform="translate(0,-520.8662)"
     id="items">
    <rect
       ry="0"
       rx="0"
       y="812.9881"
       x="5.7393227"
       height="42.501518"
       width="733.25098"
       id="rect3410">
   </g>
</svg>

我有以下 D3.js 代码:

var svgBlock = d3.select("svg");
var items =  svgBlock.selectAll("g#items")
                     .data(data)
                     .enter()
                     .append("g");

我的数据是一个包含 6 个对象的数组。

问题是此代码附加了 5 <g>但 child svg ，不是 <g id="item"> 的子项。 此外，数据中的第一项根本不会被附加。

如有任何建议，我们将不胜感激!

Answer 1

d3 附加到您正在调用附加操作的选定对象(在本例中为您的 svg 标记)。

要附加到您的目标g，请执行以下操作:

svgBlock.select("g#items") //<-- appending to this g
  .selectAll("g") //<-- a selector that matches WHAT you want append
  .data(data)
  .enter()
  .append("g");

事实上，这也应该修复您的“丢失”元素。根据您当前编写代码的方式，d3 认为 g#items 是这六个项目之一，因此它没有进入，也不是附后。