javascript - d3 强制仅在单击时显示某些链接和节点

Question

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

本质上，强制布局将根据切换的任何按钮显示链接和节点。例如，如果我单击学术界、联邦和联邦，则只有这些组下的链接和节点才会显示在我的可视化中。有谁知道我该如何设置？

这是我的代码的链接: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)
 }
});

链接的方法类似，我想你可以将类型信息添加到数据源中。并在过滤时保持“类型”的名称一致(“Commonwealth”V.S“Commonwealth of Virginia”)。示例 plunkr here ，点击“学术界”、“联邦”、“军事”来查看它在节点上的工作原理(其他两种类型由于命名一致性问题而无法工作)。

更新评论中的问题:要达到点击子节点时只显示信息选项卡的效果，可以查看父节点的名称并与仪表板项目进行比较:

 // 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 。同样，“共同财富”类型存在一些数据不一致，应该是“弗吉尼亚共同财富”。 (点击“联邦”、“学术界”、“非政府组织”类型看看结果如何)