D3 Выбор элемента внутри SVG

Я пытаюсь создать несколько графиков в D3. Пока это нравится, но я немного застрял. Я хочу создать одну область для хранения точек данных, а другую - для хранения оси и меток. Я думаю, что я пойду еще более тонко, чем это, чтобы сделать обновление графика более эффективным. Но проблема, с которой я сталкиваюсь, заключается в том, что я не могу выбрать подэлементы в SVG.

Вот что у меня есть:

var graph = d3.select('#Graph svg')
if (graph[0][0] == null){
    graph = d3.select('#Graph')
        .append("svg:svg")
        .attr("width",width)
        .attr("height",height)
        .attr("class","chart");
}

graph.append("svg:g")
    .attr("id","data")

Теперь я не нашел способ выбрать этот контейнер данных. Я пробовал

d3.select("#Graph svg data")

Но не повезло. Любые идеи?

Ответ 1

Попробуйте этот код.

d3.select("#Graph svg").selectAll("g")

"g" означает выбор всего node "g" в svg node.

Ответ 2

При создании контейнера данных с помощью append() вы можете сохранить его как выделение в переменной.

var dataContainer = graph.append("svg:g")
    .attr("id","data");

Если все сделано таким образом, вам даже не нужно будет снова делать выбор d3 (аналогично тому, как вы это делали с var graph в 1-й строке кода в вашем вопросе), потому что ссылка на это выбор уже сохранен в вашем var dataContainer.