d3 强制节点切换

Question

我正在尝试在 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);

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

Answer 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。

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

d3 强制节点切换

d3 force nodes toggle

toggle

d3.js

force-layout