D3.JS樹枝模様：古いプロパティと新しいプロパティをSVG要素に結合する

Question

D3の私の理解は、現在はほとんど制限されており、私は現在D3.jsの樹状図の例を満たしています。それはいくつかの場所で見つけることができます： たとえば、このインタラクティブバージョンです。

実装するときは、ノードの円直径のようなプロパティを更新するまですべてがうまくいく。もしそうなら（パラメータの変更を監視するangularjsのような対話式フレームワークを使用して）：ノードはサイズが変わります。だからまだ問題ありません。ただし、いずれかのノードをクリックすると、そのサイズは新しいものの代わりに初期化サイズにリセットされます。

ノードがクリックされたらクリック機能をクリックします。

 var nodeEnter = node.enter().append("g")
                        .attr("class", "dendrogramnode2")
                        .on("click", click);

.

クリック関数は更新機能を呼び出します。

        function click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        }

.

それは幻影図を更新して必要なノードを開くか閉じます。

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 80; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")
      .attr("x", 10)
      .attr("dy", ".35em")
      .attr("text-anchor", "start")
      //.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5)  + ")"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1)
      .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50)  + ")"; });

  // TODO: appropriate transform
  var nodeExit = node.exit().transition()
      .duration(duration)
      //.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

.

この更新機能は次のように呼び出されます。

1. 初期化時 - >問題ない（例：円R= 5）

2. パラメータが更新されたとき - >問題なしでは、パラメータが更新されます。 （例：円R= 10）

3. ノード - >問題 - >グラフをクリックすると、初期パラメータが取ります。（例：円R= 5）

これのすべては、スコープとDataBindingを処理する方法とどのように関係があるかをたくさん持っていますが、これを正しくする方法がわかりません。私は古いものの代わりに新しいプロパティにアクセスできる必要があります。

のどちらかの方法がありますか

1. コードを調整するので、古いものの代わりに新しいパラメータが取られていますか？

2. オブジェクトとしてSVGグループにパラメータをバインドします（おそらく効率的ではありませんか？） D3セレクタを使用している範囲から手動で手を差し伸べることができますか？

Answer 1

データごとに異なるものではない属性のDOM要素にプロパティを設定しました。

            function dograph(p){
                //paramater object is passed and it's name is "p"
                d3.select(elementid).selectAll("svg")[0][0]["p"] = p
                //at some point update function gets called as part of an event and p is no longer available. 

                //someSvgElement
                        .on("mouseover"){update())}

                function update(source) {
                    var p = d3.select(elementid).selectAll("svg")[0][0]["p"];
                    //stuff happens
                }
            }

.

完璧な解決策ではないかもしれませんが、それは私のために機能します。