如何根据表单输入将 D3 元素变灰？

Question

我正在使用 D3 绘制动态散点图。 (Current draft)

我想在页面底部添加一个表单，根据表单隐藏或变灰某些圆圈。

表单将包含复选框和滑块。这个问题只问滑块。目前我卡在如何让 D3 元素响应表单

下面this tutorial I made a slider that calls an update function when the user interacts with the slider. This SO answer给出了改变数据点颜色填充的代码。

update 函数中的 console.log 语句表明我没有选择正确的 D3 元素。

如何 access/link 正确的 D3 元素？

Answer 1

您应该根据表单输入过滤数据，然后将更改的数据通知 d3.js。放一些像

d3.select('#chart svg')
      .datum(filterDataset(dataset, nRadius))
      .transition().duration(1000)
      .call(chart);

在您的更新函数中（pastebin 中的示例）

灰色化大致相同，除了您只更改数据中的属性并使 d3 根据您的属性为项目着色。