用d3plus中的節點點擊過濾數據重繪環

我想在點擊任何節點時重繪圖表。當用戶點擊任何節點時，它應該過濾來自主Json的相應節點的數據，然後重新繪製環。我嘗試了下面的代碼，但它不工作。用d3plus中的節點點擊過濾數據重繪環

<!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的兩個版本： First Version和 Second version

類似的東西來This Scatter plot but in rings

來源

2016-09-10 Satish Patel

試試這樣說：

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);

來源

2016-09-10 07:13:47 limekin

哇。一個'.html（''）'做了所有需要的事情。謝謝：） –

用d3plus中的節點點擊過濾數據重繪環

回答

相關問題