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 объектов ,

Вопрос заключается в том, что этот код добавляет <g> но ребенка к 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 является одним из шести, поэтому он не , ввод и не прилагается.