Javascript d3.js更改节点的不透明度及其'；s基于筛选器的传出和传入链接

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

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

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数据转换为适当的格式以呈现图形

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

});

工作就在这里。它的灵感来源于这个例子

因此，我的图有4种类型的节点；代理人、客户、电话、身份证。这些由

  d.type

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

---

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

这里有两个问题

问题1：范围

在“更改”函数中，您正在引用

节点

和

链接

。但是

节点

和

链接

仅存在于

makeGraph

函数中

解决方案是将所有事件处理程序移动到

makeGraph

函数内部

问题2：类型转换

执行此操作时：

value = +this.value;

您正在尝试将没有数字的字符串转换为数字。因此：

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

而你没有和NaN做任何事

解决方案：保留字符串

---

这是您更新的小提琴：

这个+this.value是一个愚蠢的打字错误。谢谢你的另一部分。非常感谢……：）。

value = +this.value;

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