d3 svg要素からのデータの選択

Question

d3コードでg要素を選択する際に問題があり、その処理方法がわかりません。

コード

var vis = d3.select("#custom-view").append('svg:svg').attr('width', w).attr('height', h); 

d3.range(lengthJson).forEach(function (t) { 
     vis.append("g") 
     .attr('width', wBlob) 
     .attr('height', hBlob); 

      return t 

}); 

var blobs = **tried numerous things here**.selectAll('g').data(graph.nodes) 
     .enter() 
     .append('rect') 
     (....do a lot more code...) 

通報

上に示したコードは、JSONファイルの長さに応じて要素に要素を追加します。それから、要素の中に要素を追加する必要があります。私はそれを私がしようとしたグラム要素

を作るとき、それがforEachの機能に包まれていない場合に動作します変数

var gCode = vis.append("g") 

を宣言しようとしました

を試してみました

物事属性にクラスを割り当て、すべてのg要素でそのように選択します。

はまた、SVG要素にIDを与え、そのように選択しようとしたが、運

Answer 1

は使用はD3コード内の要素を追加するために、forEachのように、ループしないでください。もちろん

D3はJavaScriptがあるので、我々は、D3コードでループ（forループ、ループfor...in、forEachループなど）すべての時間を使用して...しかし、我々は、要素を追加するためにループを使用していません、それは慣用的なやり方ではありません。最終的には、要素を追加するためにループを使用しますが、非常に特殊で稀なケースがあります。

ループを使用してD3コードに要素を追加することは、厄介なだけでなく、（簡単な）ソリューションがない状況に置かれることもあります。このように。

あなたの場合の慣用的な方法は、ネスト入力選択です。

データセットの長さに基づいて入力選択を使用してグループを追加し、内側の入力選択を使用して長方形などの任意の要素を追加します。 data配列は3つの要素を有し、上記デモで

var data = ["foo", "bar", "baz"]; 
 
var body = d3.select("body"); 
 
var colors = d3.scaleOrdinal(d3.schemeCategory10) 
 
var divs = body.selectAll(null) 
 
    .data(d3.range(data.length)) 
 
    .enter() 
 
    .append("div") 
 
    .style("background-color", function(d) { 
 
    return colors(d) 
 
    }); 
 
var texts = divs.selectAll(null) 
 
    .data(data) 
 
    .enter() 
 
    .append("tspan") 
 
    .text(function(d) { 
 
    return d + " " 
 
    })

<script src="https://d3js.org/d3.v4.min.js"></script>

：

ここ<div> sおよび<tspan> Sを使用して、非常に基本的な例です。したがって、最初の（または外側の）入力選択では、ボディに3つのdivが追加されます。

次に、2番目（内側）の選択によって、各divに対して、データ配列の3つの要素が追加されます。