javascript - 下拉按钮过滤 d3.js 图表

Question

我有一个工作正常的图表，甚至可以过滤按钮点击时的数据。现在我正在尝试使用下拉按钮而不是常规按钮。当用户从下拉列表中选择 Amount 作为 1000 或 2000 时，应该根据属性过滤节点和链接

d.total_amt> 1000 or d.total_amt > 2000

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>


  <label for="input ID">Amount</label>
  <select id="select_ID" name="select_ID">
    <option value="1000">1000</option>
    <option value="2000">2000</option>
   </select>
   <button id="full_data">
   full data
   </button>

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"],..])

下面是一段代码，它将使这些数据以适合呈现图形的格式出现:

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, PayTime, TXN_COUNT, Total_Amt, SendTime);
makeGraph("#Network_graph", final_data);

我已经使用这些数据制作了一个力导向图。 Jsfiddle是工作图的链接。

现在我正在尝试添加用于数据过滤的下拉列表。这是保留从下拉列表中选择的代码部分

    d3.select(this)  //right way to hold on to the selection or need some jquery?
.selectAll("option")
.filter(function(d, i) {
  return this.selected;
});

这段代码使用过滤函数过滤节点和链接。

    function isUnique(id, nodes) {
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].id == id) {
          return false;
        }
      }
      return true;
    }

  var filtered_data = [];
  var nodes = [];
  var links = [];
  d3.selectAll("line").filter(function(d, i) {
    if (d.total_amt > this.value) {
      if (isUnique(d.source.id, nodes)) {
        nodes.push(d.source);
      }

      if (isUnique(d.target.id, nodes)) {
        nodes.push(d.target);
      }
      links.push(d);
    }
  });
  filtered_data.links = links;
  filtered_data.nodes = nodes;
  filtered_data.nodetype = final_data.nodetype;

  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", filtered_data); 

上述做法是否有意义？所以，到目前为止，这还没有奏效。我不知道缺少的部分是什么。我也对其他可能更适合下拉列表的想法持开放态度。仍在寻找 d3.js/javascript 的出路。期待您的帮助。

Answer 1

好的

这是您需要的代码:

var elem = document.getElementById('select_ID');
elem.addEventListener("change", onSelectChange);

function onSelectChange(){
  var value = this.value;
  var fdata = filteredData(value);
  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", fdata);
}

为了在您的选择选项更改时执行某些操作。选择该元素并为其附加一个事件监听器(在本例中为更改)。

var elem = document.getElementById('select_ID');
elem.addEventListener("change", onSelectChange);

在此更改事件中，如您所说，使用 this.value 获取值并进行过滤。

这是 fiddle :https://jsfiddle.net/tgv6s5cd/14/