d3.js dendrogram：将新旧属性绑定到 svg 元素答案

【问题标题】：d3.js dendrogram : binding old and new properties to the svg elementd3.js dendrogram：将新旧属性绑定到 svg 元素
【发布时间】：2014-06-05 12:44:49
【问题描述】：

我目前对 d3 的理解相当有限，我目前正在摆弄 D3.js 的树状图示例。它可以在几个地方找到：以this interactive version 为例。

当我实现它时，一切都很好，直到您尝试更新诸如节点的圆直径之类的属性。如果我这样做（使用像 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;
  });
}

因此调用了这个更新函数：

初始化时 --> 没问题（例如：circle r = 5）
当参数更新时 --> 没问题，参数更新。（例如：圆 r = 10）
当你点击一个节点时-->有问题-->图形采用初始参数。（例如：circle r = 5）

所有这一切可能与范围界定以及 javascript 如何处理数据绑定有很大关系，但我不知道如何正确地做到这一点。我要么需要能够访问新属性而不是旧属性。

有办法吗

调整代码以便采用新参数而不是旧参数？
将参数作为对象绑定到 svg 组（可能效率不高？）所以我可以使用 d3 选择器从任何范围手动访问它吗？

【问题讨论】：

将数据的半径部分绑定到圆会更像 D3。这也应该修复错误。
Lars 的评论非常好。但是，在这种情况下，调整一个不需要更改每个数据点但更像是一个整体属性的参数将：A）在 DOM 中占用更多空间，B）在更改它时，您需要循环遍历为了永远改变它的数据点。所以我认为对于“开销”属性会有一种更有效的方法？
我认为 A 并不重要，因为它只是一个数字。我也看不出 B 会有什么问题，因为您可以简单地设置和使用该属性，而不是在您当前拥有的代码中使用数字。
如果你在 angularjs 中的数据上加上 $watch，A 就会变得很重要。至于B，是的，我就是这样做的，谢谢你的回答:)。

标签： javascript d3.js properties dendrogram

【解决方案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
                }
            }

可能不是完美的解决方案，但它对我有用。

【讨论】：