javascript - 在 d3plus 中单击节点时使用过滤后的数据重绘环-6ren

javascript - 在 d3plus 中单击节点时使用过滤后的数据重绘环

转载作者：行者123 更新时间：2023-11-30 00:03:23

我想在点击任何节点时重新绘制图表。当用户点击任何节点时，它应该从master 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的两个版本: First Version和 Second version

类似于 This Scatter plot but in rings 的内容

最佳答案

这样试试:

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

关于javascript - 在 d3plus 中单击节点时使用过滤后的数据重绘环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39422561/

文章推荐： php - 检查类别是否有父级

文章推荐： android - 前台服务被操作系统杀死

文章推荐： php - 按相关性进行 boolean 全文搜索顺序似乎不起作用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 d3plus 中单击节点时使用过滤后的数据重绘环