2017-12-31 54 views
0

ノードのサイズをそのサイズに基づいて変更したいと思います。 この例では、ズーム係数が0.5未満のノードを赤色で表示したい場合は、グループカラーを使用します。私は次のコードを試してみましたが、エラーメッセージを返します。nullはオブジェクトではありません(d3.event.transform)。 エラーコードによると、私はd3.event.transformがまだ初期化されていないと思います。ズーム時にノードスタイルを更新するには?

ノードスタイル関数内からズーム係数を取得する方法はありますか?

var node = pane.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", function(d) { return d.value*5 }) 
    .style("fill", function(d) { 
      return (d3.event.transform.k < 0.5) ? "red": color(d.group); 
    }); 
+0

コードスニペット、jsfiddleなどを作成してお手伝いしますか? cf. https://stackoverflow.com/help/mcve –

答えて

0

私は最終的にそれが働いて持って管理し、node.on( "zoom"、...)は私のためには機能しませんでしたが、ズームされた関数の中のその機能はトリックでした。私はノードがズームイベントを得ることはないと考えています。おそらく、コール(ズーム)関数がグラフ全体に結びついているからです。ズーム倍率より大きい

function zoomed() { 
    d3.selectAll('circle').style('fill', function(d) { 
     return (d.value > d3.event.transform.k) ? 'red': color(d.group); 
    }) 
    pane.attr("transform", d3.event.transform); 
} 

ノードは赤色(フィドルhere)で着色します。 これは、特に大きなグラフでは最適な解決策ではないかもしれませんが、この作業は最適です。

2

共有コードの抜粋は、完全ではないですが、私は、これは、図面の最初の世代で使用したコードに対応しており、それは「ズーム」イベントのリスナー内にラップされていないことを推測します。行われるべきである何

は次のとおりです。デフォルトの色で描画

  • 更新initizalize

    1. ズームイベントの塗りつぶし色。

    更新コード:

    図面を初期化します。

    var node = pane.append("g") 
        .attr("class", "nodes") 
        .selectAll("circle") 
        .data(graph.nodes) 
        .enter().append("circle") 
        .attr("class", "node") 
        .attr("r", function(d) { return d.value*5 }) 
        .style("fill", function(d) { 
          return color(d.group); 
        }); 
    

    はその後、ズームイベントに耳を傾ける:

    node.on('zoom', function() { 
        node.selectAll('circle') 
         .style('fill', function(d) { 
         return (d3.event.transform.k < 0.5) ? 'red': color(d.group); 
        }) 
    }) 
    
  • +0

    ここには謎がありますhttps://jsfiddle.net/pducrot/tokbs3vg/#&togetherjs=9D6U8g2qnD – Pierre

    +0

    ノードのサイズは異なります。ノードにはさまざまなサイズがあります。ノードラベルを表示する、ノードの色を変更するなど、特定のサイズに制限されます。それらのサイズはd.valueに基づいています。私は、ノードスタイルとズームした関数で関数を追加しようとしましたが、機能しません。ズーム関数は、私が推測するノードについては知らない。 – Pierre

    +0

    私はフィドルであなたの提案を試みた、それは動作していないようです。オンズーム機能(console.log(d3.event.transform.k))はまったく入力されていないようです。コール(ズーム)機能はにあります。それもノードである必要がありますか? – Pierre

    関連する問題