Невозможно добавить несколько элементов в набор данных в D3

Question

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

graph1.selectAll("circle").data(data).enter() 
    .append("circle") 
    .attr({ cx: posX, cy: posY, r: 5 }) 
    .attr("class", "outer") 
    .append("circle") 
    .attr({ cx: posX, cy: posY, r: 2 }) 
    .attr("class", "inner"); 

Но второй комплект не отображается. Я предполагаю, что они там где-то, потому что работает d3.selectAll («круг») дает мне в два раза больше размера массива. Но я не могу понять, где их положить. Я подозреваю, что каждый из них помещается как субтег в соответствующий рассматриваемый круг.

Я также попытался разделить заявление в два, как это.

graph1.selectAll("circle").data(data).enter() 
    .append("circle") 
    .attr({ cx: posX, cy: posY, r: 5 }) 
    .attr("class", "outer"); 
graph1.selectAll("circle").data(data).enter() 
    .append("circle") 
    .attr({ cx: posX, cy: posY, r: 2 }) 
    .attr("class", "inner"); 

Это не работает, ни, и, честно говоря, я не уверен, если ввести() набора до сих пор действуют в качестве привязанной ссылки установлены на первые круги ... Кажется, что весь набор вторичных окружностей выходит за пределы тела документа.

1. Как получить вторичные круги на экране?
2. Должен ли я использовать append(). Append() или использовать отдельные заявления?

Answer 1

В первом случае, вы вложенность circle элементов внутри circle элементов, не допускаются в спецификации SVG.

Во втором случае вызов .data() в D3 соответствует данным, которые вы передаете в качестве аргумента элементам выбранного вами выбора. Когда в DOM уже есть круги, они выбираются, данные сопоставляются с ними, а выбор ввода пуст.

Чтобы исправить в вашем конкретном случае (как вы используете одни и те же данные), вы можете сохранить выбор и работать на нем в несколько раз:

var sel = graph1.selectAll("circle").data(data).enter(); 
sel.append("circle")... 
sel.append("circle")... 

В качестве альтернативы, можно добавить класс, который позволяет вам провести различие между двумя наборами кругов и соответствующим образом изменить ваш селектор:

graph1.selectAll("circle.first").data(data).enter() 
    .append("circle").attr("class", "first")... 
graph1.selectAll("circle.second").data(data).enter() 
    .append("circle").attr("class", "second")...