javascript - D3 - 強制レイアウト、円内円

Question

D3.jsを学習中。

強制レイアウトを使用して、図のように別の円形状内に円を配置することは可能ですか? ノードごとに 1 つの円からノードごとに 2 つの円を表示する表示に移行したいと考えています。有効なドーナツのサイズは、データ内の別の変数を示すために使用されます。

これは可能ですか？

Answer 1

roippi のおかげで、2 つの円を含むグループを作成できました。

var nodeCircles = svg.selectAll("g")
    .data(nodes);

    // Outer circle 
var outer = nodeCircles
    .enter()
    .append("circle")
    .attr("class", "node_circle")
    .attr("r", function(d) { return d.radius_plus; })
    .style("fill", function(d) { return d.color_plus; })    
    .style("opacity", 0);   

    // Inner circle
var inner = nodeCircles
    .enter()
    .append("circle")
    .attr("class", "node_circle")
    .attr("r", function(d) { return d.radius; })        
    .style("fill", function(d) { return d.color; })
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })    
    .on("mouseover", mouseOver)
    .on("mouseout", mouseOut)
    .call(force.drag);

外側の円の可視性は、ボタンで切り替えられます。

前述のように、私はデスクトップ ベースの IDE を使用して視覚化言語を実行/テストしています。現在、IDE は D3.js、Raphael、Processin.js、Paper.js、Dygraphs で書かれた研究をサポートしています。下の写真...

Answer 2

ほとんどの例で見られるように、基本的な svg 円以外のものを使用する必要さえありません。それにデータをバインドし、ストロークを適用し、ストローク幅属性を他の変数に設定するだけです。またはr - otherVar、その部分を理解できると確信しています。

これで満足できない場合は、独自の形状を作成してください。'g' svg 要素はコンテナー要素であり、好きなものを構築できます。ag に 2 つの円を追加し、好きなように塗りつぶします。svg には「上に」という概念がないため、追加した順序で描画されるだけなので、必ず正しい順序で追加してください。

編集:わかりました、簡単なデモなので、いくつかの構文を学ぶことができます。コメントは追加しませんでしたが、コードが非常に冗長で単純であることを願っています。 ここで見つけてください。

d3/svg は、しばらく頭を悩ませなければならないものです。新しいことをすばやくテストし、保存し、ブラウザーを更新して結果を確認できるサンドボックス環境を作成する時間を費やすことを強くお勧めします。その所要時間を最小限に抑えることが重要です。