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”的单选按钮应减少其他节点和链接的不透明度，除了那些从所有“代理”节点传出和传入的链接

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做任何事情。

解决方案：保持字符串。

这是您更新的小提琴：https://jsfiddle.net/u9y4m32k/

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

1 个答案: