web-dev-qa-db-ja.com

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")

しかし、運はありません。何か案は？

javascriptsvgd3.js
21
Dan Walmsley

このコードを試してみましょう。

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

「g」は、svgノードの下のすべてのノード「g」を選択することを意味します。

22
lahphim

append()を使用してデータコンテナーを作成する場合、選択範囲として変数に保存できます。

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

この方法で行った場合、d3を再度選択する必要はありません（同様の方法で、質問のコードの1行目でvar graphを使用した場合）。この選択への参照はすでにvar dataContainerに保存されています。

1
ksav