可折叠Sankey图-D3 [英] Collapsible Sankey Diagram - D3

问题描述

我想知道如何通过鼠标单击使sankey图折叠/展开节点.

I want to know how to make a sankey diagram collapse/expand the nodes based on mouse click.

我的图是这样的: https://bl.ocks.org/TheBiro/f73a2a0625bb803179f3905fe7624e22

例如，我想单击节点"PAGOU"，然后删除所有后续链接和节点(在右侧). 我是根据Vasco Asturiano(参考readme.md)的配售选项制成的.

For example, I want to click on the node "PAGOU" and all of the subsequent links and nodes (on the right) to be removed. I made it based on the Vasco Asturiano (reference on readme.md) aligment options.

推荐答案

我从此处的上一个答案中改编了以下代码: 具有非树数据的可折叠D3力导向图

I adapted the code below from my previous answer here: Collapsible D3 force directed graph with non-tree data

我向节点添加了属性，以跟踪它们是否折叠以及折叠了多少个父节点.另外，它们是否可折叠-源节点也不应可折叠，因为库似乎不喜欢没有链接的图.

I added properties to the nodes to keep track of whether they are collapsed and how many of their parent nodes are collapsed. Also whether they are collapsible - the source node should not be collapsible because the library doesn't seem to like graphs with no links.

graph.nodes.forEach(function (d, i) {
  graph.nodes[i] = { "name": d };
  graph.nodes[i].collapsing = 0;    // count of collapsed parent nodes
  graph.nodes[i].collapsed = false;
  graph.nodes[i].collapsible = false;
});

我更改了链接的代码，使其指向整个源或目标节点而不是索引，因为我们需要源节点进行过滤.我还将所有目标节点设置为可折叠.

I changed the code for the links to point to the whole source or target node rather than the index because we need the source nodes for filtering. I also set all target nodes are collapsible.

graph.links.forEach(function(e) {
  e.source = graph.nodes.filter(function(n) {
        return n.name === e.source;
      })[0],
  e.target = graph.nodes.filter(function(n) {
        return n.name === e.target;
      })[0];
  e.target.collapsible = true;   
});

我将布局代码提取到一个函数中，以便每次单击节点时都可以调用它.我还添加了代码，以根据它们及其父级是否折叠来过滤图节点和链接.

I pulled the layout code out into a function so that we can call it every time a node is clicked. I also added code to filter the graph nodes and links each time based on whether they and their parents are collapsed.

update();

var nodes, links;

function update() {
  nodes = graph.nodes.filter(function(d) {
    // return nodes with no collapsed parent nodes
    return d.collapsing == 0;
  });

  links = graph.links.filter(function(d) {
    // return only links where source and target are visible
    return d.source.collapsing == 0 && d.target.collapsing == 0;
  });

  // Sankey properties
  sankey
    .nodes(nodes)
    .links(links)
    .layout(32);

  // I need to call the function that renders the sakey, remove and call it again, or the gradient coloring doesn't apply (I don't know why)
  sankeyGen();
  svg.selectAll("g").remove();
  sankey.align("left").layout(32);
  sankeyGen();
}

我不得不注释掉这一行，因为它干扰了点击处理程序，我不确定在那里所做的更改.

I had to comment out this line because it was interfering with the click handler, I'm not sure what I've changed there.

.on("start", function() {
    //this.parentNode.appendChild(this);
})

我添加了一个点击处理程序来执行折叠操作.

I added a click handler to perform the collapsing.

node.on('click', click);
function click(d) {
  if (d3.event.defaultPrevented) return;
  if (d.collapsible) {
    // If it was visible, it will become collapsed so we should decrement child nodes count
    // If it was collapsed, it will become visible so we should increment child nodes count
    var inc = d.collapsed ? -1 : 1;
    recurse(d);

    function recurse(sourceNode){
      //check if link is from this node, and if so, collapse
      graph.links.forEach(function(l) {
        if (l.source.name === sourceNode.name){
          l.target.collapsing += inc;
          recurse(l.target);
        }
      });
    }
    d.collapsed = !d.collapsed;  // toggle state of node
  }      
  update();
}

cirofdo的要旨

这篇关于可折叠Sankey图-D3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！