在d3plus中单击节点时，用过滤后的数据重新绘制环

Redraw the ring with filtered data on click of node in d3plus

本文关键字：新绘制 数据 绘制 单击 d3plus 节点 过滤      更新时间：2023-09-26

我想在单击任何节点时重新绘制图表。当用户单击任何节点时，它应该从主Json中过滤相应节点的数据，然后重新绘制环。我试了下面的代码，但它不工作。

<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="viz"></div>
<script>
var flag =0;
var curr_data = [];
var connections = [
    {source : "alpha", target : "beta", read: 1, write : 0},
    {source : "alpha", target : "gamma", read: 0,  write: 1},
    {source : "alpha", target : "delta", read: 1,  write: 0},
    {source : "alpha", target : "epsilon", read: 0, write : 0},
    {source : "alpha", target : "peta" ,read: 1, write : 0},
    {source : "alpha", target : "zeta", read: 0, write : 0},
    {source : "alpha", target : "eta", read: 1, write : 1},
    {source : "beta", target : "alpha", read: 0, write : 0},
    {source : "beta", target : "gamma", read: 0,  write: 1},
    {source : "beta", target : "delta", read: 1,  write: 1},
    {source : "beta", target : "epsilon", read: 0, write : 1},
    {source : "beta", target : "peta" ,read: 1, write : 0},
    {source : "beta", target : "zeta", read: 0, write : 0},
    {source : "beta", target : "eta", read: 1, write : 1},
    {source : "gamma", target : "beta", read: 1, write : 0},
    {source : "gamma", target : "iota", read: 0,  write: 1},
    {source : "gamma", target : "delta", read: 1,  write: 0},
    {source : "gamma", target : "epsilon", read: 0, write : 0},
    {source : "gamma", target : "peta" ,read: 1, write : 0},
    {source : "gamma", target : "zeta", read: 1, write : 1},
    {source : "gamma", target : "eta", read: 1, write : 1},
    {source : "delta", target : "beta", read: 1, write : 0},
    {source : "delta", target : "gamma", read: 0,  write: 1},
    {source : "delta", target : "neta", read: 1,  write: 0},
    {source : "delta", target : "epsilon", read: 0, write : 0},
    {source : "delta", target : "peta" ,read: 1, write : 0},
    {source : "delta", target : "zeta", read: 0, write : 0},
    {source : "delta", target : "eta", read: 1, write : 1}
];
var focused_node = "alpha";
for (var v in connections){
var item = connections[v];
if (item.source.localeCompare("alpha") == 0) {
curr_data.push({
    "source": item.source,
    "target": item.target
});
}
}
$(function(){
  var visualization = d3plus.viz()
    .container("#viz")  
    .type("rings")      
    .edges(curr_data) 
    .edges({"arrows":true, "color":"#000000"})
    .edges({"arrows" : {"value": ["source","target"], "direction": "source"  }})
    .focus(focused_node)     
    .draw();
    visualization.mouse({
      click: function(dataPoint, currInstance) {
        curr_data = [];
        focused_node = dataPoint.id;
            for (var i in connections) {
                var item = connections[i];
                if (item.source.localeCompare(dataPoint.id) == 0) {
                    curr_data.push({
                        "source": item.source,
                        "target": item.target
                    });
                }
            };
      }
    });
    visualization.edges(curr_data).focus(focused_node).draw();
});
</script>

plnkr有两个版本:第一版及第二个版本

类似于这个散点图，但在环

试试这样做:

var flag =0;
// This represents the edges that are shown right now.
var activeEdges = [];
// The node that is currently focused.
var focusedNode = "alpha";
var connections = [
    {source : "alpha", target : "beta", read: 1, write : 0},
    {source : "alpha", target : "gamma", read: 0,  write: 1},
    {source : "alpha", target : "delta", read: 1,  write: 0},
    {source : "alpha", target : "epsilon", read: 0, write : 0},
    {source : "alpha", target : "peta" ,read: 1, write : 0},
    {source : "alpha", target : "zeta", read: 0, write : 0},
    {source : "alpha", target : "eta", read: 1, write : 1},
    {source : "beta", target : "alpha", read: 0, write : 0},
    // ... 
    // ...
];

// Resets and creates the edges based on the focusedNode.
function refreshEdges(focusedNode) {
  activeEdges = [];
  connections.forEach( function(connection) {
    if(connection.source == focusedNode) {
      activeEdges.push({
        source: connection.source,
        target: connection.target
      });
    }
  });
}
// Draws the ring.
function drawRing(focusedNode) { 
  // Clear the contents in the container.
  $("#viz").html('');
  var visualization = d3plus.viz()
    .container("#viz")  
    .type("rings")      
    .edges(activeEdges) 
    .edges({arrows: true, color:"#000000"})
    .edges({arrows : {value: focusedNode, direction: "target"  }})
    .focus(focusedNode)     
    .mouse({
      click: function(dataPoint, currInstance) {
        refreshEdges(dataPoint.id);
        drawRing(focusedNode);
      }
    })
    .draw();
}
// Set the edges and draw ring.
refreshEdges(focusedNode);
drawRing(focusedNode);

相关文章：