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

该方法与链接类似，我想您可以将类型信息添加到数据源中。并保留＆＃39;类型的名称＆＃39;过滤时保持一致（＆＃39;英联邦＆＃39; V.S＆＃39;弗吉尼亚联邦＆＃39;）。示例plunkr here，点击＆＃39; Academia＆＃39;，＆＃39; Federal＆＃39;，＆＃39; Military＆＃39;看看它如何为节点工作（其他两种类型由于命名一致性问题而无法正常工作）。

评论中的问题更新：要在单击子节点时实现仅显示信息选项卡的效果，您可以检查父节点的名称并将其与仪表板项目进行比较：

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

然后在click事件监听器中：

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

示例plunkr here。同样，只有“共同财富”的数据不一致。类型，应该是弗吉尼亚的共同财富＆＃39;。（点击联邦＆＃39;，＆＃39;学术界＆＃39;，＆＃39;非政府组织＆＃39;类型，看看结果如何）

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

1 个答案: