javascript - d3.js 根据过滤器更改节点及其传出和传入链接的不透明度

Question

我有一个完全工作力定向图。

我正在尝试添加单选按钮，单击它们应该根据条件动态更改节点的不透明度。

HTML

    <style>
  .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }

  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }

  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }

  div.tooltip {
    position: absolute;
    background-color: white;
    max-width: 200px;
    height: auto;
    padding: 1px;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
  }

</style>
<svg id="Network_graph" width="400" height="350"></svg>
<div id="map"></div>
<div id="legend">
  <h3>Filter</h3>
  <div class="input-group" id="filters">
    <label>
      <input type="radio" name="filter" value="All" checked="checked"> All</label>
    <br />
    <label>
      <label>
        <input type="radio" name="filter" value="Agent"> Agent</label>
      <br />
      <label>
        <input type="radio" name="filter" value="Customer"> Customer</label>
      <br />
      <label>
        <input type="radio" name="filter" value="Phone"> Phone</label>
      <br />
      <label>
        <input type="radio" name="filter" value="ID_Card"> ID_Card </label>

  </div>
</div>





</button>

我的 JSON 数据的格式如下:

JSON

var IDData = JSON.stringify([
  ["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264, "1374903"],
  ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000, "529502"],
  ["node/10750", "node/59648369", "Agent", "Customer", "1454228.0", 1, 120, "1454118"],
  ["node/10750", "node/78569210", "Agent", "Customer", "1425251.0", 1, 234, "1421416"],
  ["node/10750", "node/96726118", "Agent", "Customer", "1376239.0", 1, 434, "1376152"],
  ["node/10946829", "node/11190", "Customer", "Agent", "1409620.0", 20, 3380, "1406665"],
  ["node/10946829", "node/57774036", "Customer", "Customer", "1460029.0", 3, 960, "1459731"],
  ["node/109947", "node/97911872", "Agent", "Customer", "1323025.0", 1, 600, "1315582"],..])

使用此函数，我将此 JSON 数据转换为合适的格式以呈现图表，

$(document).ready(function() {

    console.log(IDData);
    var galData = JSON.parse(IDData);
    var startnodes = [];
    var endnodes = [];
    var startnodetype = [];
    var endnodetype = [];
    var PayTime = [];
    var TXN_COUNT = [];
    var Total_Amt = [];
    var SendTime = [];
    galData.map(function(e, i) {
        startnodes.push(e[0]);
        endnodes.push(e[1]);
        startnodetype.push(e[2]);
        endnodetype.push(e[3]);
        PayTime.push(e[4]);
        TXN_COUNT.push(e[5]);
        Total_Amt.push(e[6]);
        SendTime.push(e[7]);
    });
    var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, depth, PayTime, TXN_COUNT, Total_Amt, SendTime);
    makeGraph("#Network_graph", final_data);

});

工作中JsFiddle在这里。它的灵感来自 d3.js library 这个例子.

所以，我的图有 4 种类型的节点；代理、客户、电话、ID_Card。这些由

表示

  d.type

所以，现在我写了下面的代码；应该根据所选的单选按钮来过滤图形，因此，例如选择值为“Agent”的单选按钮应该减少其他节点和链接的不透明度，但从所有“Agent”节点传出和传入的链接除外.

d3.selectAll("input[name=filter]").on("change", function(d){


      var value = this.value;

      node.style("opacity", 1);
      link.style("opacity", 1);


      if (value !== "all"){
        value = +this.value;
        node.filter(function(d){
          return d.type != value;
        })
        .style("opacity", "0.5");

        link.filter(function(d){
          return d.source.type != value ||
                 d.target.type != value;
        })
        .style("opacity", "0.5");
      }



    });

似乎还缺少一些东西，运行它并不会改变不透明度。我对 javascrpt 和 d3.js 非常陌生，缺乏专业知识。因此，寻求一些帮助。

Answer 1

这里有两个问题。

问题 1:范围

在“更改”函数中，您正在引用node和link。但 node 和 link 都只存在于 makeGraph 函数中。

解决方案是将所有事件处理程序移至 makeGraph 函数内部。

问题2:类型转换

当你这样做时:

value = +this.value;

您正在尝试将没有数字的字符串转换为数字。所以:

console.log(+this.value);//returns NaN

而且你没有对 NaN 做任何事情。

解决方案:保留字符串。

这是您更新的 fiddle :https://jsfiddle.net/u9y4m32k/