下拉按钮可过滤d3.js图表

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

d.total_amt> 1000 or d.total_amt > 2000 

HTML

   .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; }   Amount  1000 2000   full data  

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

这段代码使用filterfunction来过滤节点和链接。

  function isUnique(id, nodes) { for (var i = 0; i  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); } 

为了在您的选择选项更改时执行某些操作。 选择元素并附加事件侦听器（在本例中为change）。

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

在此更改事件中，使用this.value获取值，就像您已经说过并进行过滤一样。

这是小提琴： https ： //jsfiddle.net/tgv6s5cd/14/