d3 игнорировать SVG на selectAll

Question

Все еще изучается d3.js.

Я хотел бы игнорировать выбор панели SVG при использовании .selectAll ("svg").

Я создаю визуализацию, состоящую из четырех панелей SVG. Верхняя панель SVG используется для отображения информации заголовка/заголовка для визуализации.

var svgHeader = d3.select("body") 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", 100) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .append("g"); 

Следующие две панели SVG динамически создаются с использованием двух чисел, представляющих два года.

var svg = d3.select("body") 
    .selectAll("svg") 
    .data(d3.range(2012, 2013)) 
    .enter().append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", 200) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .append("g"); 

Окончательный SVG содержит подробную информацию, поскольку пользователь взаимодействует с визуализацией.

Проблема: Я хочу исключить первую панель SVG из .selectAll ("svg"), которая используется для создания двух средних панелей. Я хотел бы динамически создавать SVG-панели и размещать их под ранее созданным SVG-заголовком.

Есть ли способ исключить заголовок SVG при динамическом создании средних панелей?

Answer 1

Я думаю, что наилучшим способом, которым вы должны заниматься, является использование классов и добавление соответствующего класса к различным svgs, а затем выбор на основе класса, а не svg. Таким образом, вы знаете, что представляет собой каждый из svgs, и вы можете легко ссылаться на них ».

var svgHeader = d3.select("body") 
    .append("svg") 
    .attr("class", "svgHeader") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", 100) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .append("g"); 

А потом другой два добавить другое имя класса

var svg = d3.select("body") 
    .selectAll("svg") 
    .data(d3.range(2012, 2013)) 
    .enter().append("svg") 
    .attr("class", "data") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", 200) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .append("g"); 

Теперь вы можете сделать d3.selectAll("svg.data") и выбрать только элементы СВГ с классом data

Answer 2

В качестве альтернативы, вы можете вставлять SVG элементов в разных div. Предполагая, что у вас есть div, id которого является «center-div», следующий фрагмент возвращает вам только содержащиеся в нем svg.

d3.selectAll("#center-div svg") 

Просьба также учесть, что вы можете добавить любой элемент, который DOM через d3, так дивы может быть динамически генерироваться.