为 d3 网络图添加选择框答案

【问题标题】：Add a select box for a d3 network diagram为 d3 网络图添加选择框
【发布时间】：2015-10-02 18:49:19
【问题描述】：

我在一个网站上发现了这个很酷的d3 network diagram（一个json文件在这个页面的底部）。然后我正在考虑添加某种选择框作为过滤器来选择数据，以便仅显示节点的特定形状。所以我在html中写了一个这样的选择框：

<select>
    <option value="All">All</option> 
    <option value="circle">circle</option> 
    <option value="square">square</option> 
</select>

我想要的是当我选择All时，会呈现整个网络，当我选择circle时，只会呈现圆形节点。

我不是 javascript 或 html 专家，所以我不确定如何让我在 html 脚本中的选择影响 json 数据。另外我想如果我只是让未选择的形状透明会更容易吗？ d3网络中的数据格式比较棘手所以不知道添加这样的过滤器会对json数据的links部分有影响吗？

非常感谢您的任何建议

提前致谢

【问题讨论】：

标签： javascript jquery html json d3.js

【解决方案1】：

其实你不需要影响json数据本身。您描述的功能已经通过function keydown() 的按键（尝试“C”或“S”按钮）在树中实现。

因此，尝试从 select 的 onchange 事件属性中调度 keypress 事件以进行处理（这可以是 tricky）：

<select onchange='dispatchEventInside(this.options[this.selectedIndex].value)'>
    <option value="A">All</option> 
    <option value="C">Circles</option> 
    <option value="S">Squares</option> 
</select>

，反之亦然 - 按下键时更改 select 的值（查看 here，但不要忘记这会触发 onchange，所以可能暂时删除此属性）。

【讨论】：