d3 强制节点切换答案

【问题标题】：d3 force nodes toggled3 强制节点切换
【发布时间】：2016-03-08 21:21:42
【问题描述】：

我正在尝试在 d3 强制布局中的节点上编写单击、切换功能，但没有任何东西可以帮助我弄清楚如何使其工作。这个想法是，当您单击一个节点时，屏幕左侧会出现一个 svg，当您再次单击时，它会消失。这是我在没有任何运气的情况下尝试的代码：

    var tooltip = svg.append("rect")
            .attr("x", -300)
            .attr("y", 0)
            .attr("width", 300)
            .attr("height", height)
            .attr("color", "black")
            .attr("opacity", 0.8);
    
    var toggleWindow = (function () {
        var currentStatus = -300;
        
        return function () {
            currentStatus = currentStatus === -300 ? 0 : -300;
            d3.select(tooltip).attr("x", currentStatus);
        };
    })();
    
    var node = svg.selectAll(".node")
            .data(json.nodes)
            .enter().append("g")
            .on("mouseover", mouseover)
            .on("mouseout", mouseout)
            .on("click", toggleWindow)
            .call(force.drag);

这里是完整代码的链接：http://plnkr.co/edit/nwmUN4RzAwam9dE5bCEj?p=preview

【问题讨论】：

当前左侧有一个黑色矩形...您是说它应该在第一次单击时滑入，然后在第二次单击同一节点时滑出？如果有人点击 node1 然后点击 node2.. 会发生什么？
是的，它应该在第一次单击时向右滑出，并在您单击节点时滑入。您单击的每个节点都会发生这种情况。但不同之处在于，对于每次点击，它都会使用对应于每个特定节点的 json 文本填充矩形。

标签： d3.js toggle force-layout

【解决方案1】：

这就是你的做法。首先创建一个工具提示组。

  var tooltip = svg.append("g").attr("transform", "translate(-300,0)");
  //add rectangle to the group
  tooltip.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 300)
    .attr("height", height)
    .attr("color", "black")
    .attr("opacity", 0.8);

点击节点

var node = svg.selectAll(".node")
    .data(json.nodes)
    .enter().append("g")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", function(d) {
      if (tooltip.data && d.name == tooltip.data.name) {
        //if clicked on the same node again close
        tooltip.classed("open", false);
        tooltip
          .transition()
          .attr("transform", "translate(-300,0)")//slide via translate
          .duration(1000);
        tooltip.data = undefined;//set the data to be undefined since the tooltip is closed
        return;
      }
      tooltip.data = d;//set the data to the opened node
      tooltip.classed("open", true);//set the class as open since the tooltip is opened
      tooltip
        .transition()
        .attr("transform", "translate(0,0)")
        .duration(1000);
      d3.selectAll(".text-tip").remove();  //remove old text
      tooltip.append("text")//set the value to the text
      .attr("transform", "translate(10,100)")
      .attr("class","text-tip").text(d.name);

    })

工作示例here。

【讨论】：

这太好了，非常感谢！你曾经在 SVG 中使用过文本换行吗？我听说 d3plus 为您提供了这个选项，但我在将它与我的代码集成时遇到了问题。

【解决方案2】：

只需添加：

需要定义：

var COLLAPSE_LEVEL = 1

并使用以下代码：

 function toggleAll(d) {
            if (d.children) {
                d.children.forEach(toggleAll);
                if (d.level < COLLAPSE_LEVEL) {
                    return;
                }
                toggle(d);
            }
        }

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

【讨论】：