ズーム時にノードスタイルを更新するには？

Question

ノードのサイズをそのサイズに基づいて変更したいと思います。 この例では、ズーム係数が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); 
    }); 

Answer 1

私は最終的にそれが働いて持って管理し、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）で着色します。 これは、特に大きなグラフでは最適な解決策ではないかもしれませんが、この作業は最適です。

Answer 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); 
    }) 
})