javascript - d3.js - 使用 slider 动态更改图表

标签 javascript html d3.js graph data-visualization

我有一个图表,其中每条边的数值都在 0 到 1 之间。我想向网页添加一个 slider ,以便当 slider 值在 0 到 1 之间变化时,只有值大于 slider 的边才会显示画。有某种规范的方法可以做到这一点吗?我对 d3 还很陌生,并且已经查看了基本的力图代码,但不确定从哪里开始。

最佳答案

这将向 JavaScript 公开一个 UI 小部件 slider - 将其放入您的 html 正文 block 中

<p>Volume</p>
<input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>

然后将其放入您的 JavaScript 中

  document.getElementById('volume').addEventListener('change', function() {

      var curr_volume = this.value;

      console.log("curr_volume ", curr_volume);

      // now do something with curr_volume
  });

这将使您启动并运行,直到出现一些规范的技巧

关于javascript - d3.js - 使用 slider 动态更改图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26834114/

相关文章:

javascript - 复选框不会附加

javascript - 添加 onfocus 监听器而不是 onload

php - 执行 mysqli fetch 时出错

javascript - 在 D3 力导向图中添加可点击链接或 onClick 处理程序?

javascript - 如何用javascript获取随机div

javascript - 如何从 HTML 表单中收集所有值?

javascript - id值在dreamweaver中必须是唯一的?

javascript - 根据类对 <div> 执行操作

javascript - d3.js 层次树中的直 Angular 链接样式

javascript - 如何在 d3.js/JavaScript 中将零值添加到时间序列中