d3 force 仅在点击时显示某些链接和节点

Question

我在 d3 中设置了力导向布局，但我正在尝试根据我的水平按钮组只显示某些 link 和节点设置。

本质上，力布局将根据打开的任何按钮显示 links 和节点。例如，如果我单击学术界、联邦和联邦，只有这些组下的 link 和节点会显示在我的可视化中。有谁知道我该如何设置？

这是我的代码 link：https://plnkr.co/edit/QZ8chcsOj64oYJnIqz1J?p=preview

这是我的按钮（index.html 中的第 27-64 行）：

    <div class="legend;" style="margin-top: 0px; margin-bottom: 15px;">

    <div class="ngolegend item">
        <svg height="20" width="300">
            <circle cx="15" cy="12" r="4" stroke="black" stroke-width="1" fill="orange" fill-opacity="0.6" />
            <text x="25" y="16" font-family="serif" font-size="12px">Non-Governmental Organizations</text>
        </svg>
    </div>

    <div class="academialegend item">
        <svg height="20" width="300">
            <circle cx="15" cy="12" r="4" stroke="black" stroke-width="1" fill="steelblue" fill-opacity="0.6" />
            <text x="25" y="16" font-family="serif" font-size="12px">Academia</text>
        </svg>
    </div>

    <div class="commonwealthlegend item">
        <svg height="20" width="300">
            <circle cx="15" cy="12" r="4" stroke="black" stroke-width="1" fill="green" fill-opacity="0.6" />
            <text x="25" y="16" font-family="serif" font-size="12px">Commonwealth</text>
        </svg>
    </div>

    <div class="federallegend item">
        <svg height="20" width="300">
            <circle cx="15" cy="12" r="4" stroke="black" stroke-width="1" fill="red" fill-opacity="0.6" />
            <text x="25" y="16" font-family="serif" font-size="12px">Federal</text>
        </svg>
    </div>

    <div class="militarylegend item">
        <svg height="20" width="300">
            <circle cx="15" cy="12" r="4" stroke="black" stroke-width="1" fill="purple" fill-opacity="0.6" />
            <text x="25" y="16" font-family="serif" font-size="12px">Military</text>
        </svg>
    </div>

</div>

我猜我需要的代码会放在这里？（script.js 中的第 207-209 行）：

$(".item").click(function () {
$(this).toggleClass("gray");

});

Answer 1

您可以在这些节点和链接上添加额外的信息，使用data-[name]来区分不同类型的数据，例如data-type。

 var node = svg.selectAll(".node")
        .data(json.nodes)
        .enter().append("g")
        .attr("data-type", function(d){
          return d.Sector; // add data attributes for later usage.
        })
        .attr("class","node") // better to give them class name

然后在仪表板切换功能中添加这样的过滤代码：

$(".item").click(function () {
  $(this).toggleClass("gray");
  var text = $(this).find("text").text()
  if($(this).hasClass("gray")){
     d3.selectAll(".node")
       .filter(function(d,i){
         return d3.select(this).attr("data-type") == text;
       })
       // filter nodes with the same type, and make it invisible
      .style("opacity",0)
 }else {
    d3.selectAll(".node")
     .filter(function(d,i){
     return d3.select(this).attr("data-type") == text;
    })
   .style("opacity",1)
 }
});

链接的方法类似，我想你可以将类型信息添加到数据源中。并在过滤时保持 'type' 的名称一致（'Commonwealth' V.S 'Commonwealth of Virginia'）。示例 plunkr here，单击 'Academia'、'Federal'、'Military' 以查看其在节点上的工作方式（其他两种类型由于命名一致性问题而无法工作） .

更新评论中的问题：要实现点击子节点只显示信息选项卡的效果，可以查看父节点的名称，并与dashboard项进行比较：

 // collect the items in the dashboard panel
 var items = []; 
 $(".item").each(function(){
   items.push($(this).find("text").text())
 })

然后在点击事件监听中：

if($.inArray(d.name, items) !== -1){return}  
// check if this node is the parent node describe in dashboard panel

plunkr 示例 here。同样，仅 'common wealth' 类型存在一些数据不一致，应该是 'common wealth of virgina'。（点击'federal'、'academia'、'non-government organization'类型看看结果如何）

d3 force 仅在点击时显示某些链接和节点

d3 force only display certain links and nodes on click

javascript

jquery

json

d3.js

force-layout