根据单选按钮过滤器动态更改d3力图中链接和节点的不透明度

Question

我有a jsfiddle here。当选择过滤器单选按钮时，我希望它根据其评级动态更改元素和链接的不透明度（节点对象具有带有整数值的rating属性）。

由于嵌套功能，不能简单地使用onchange / onclick

当我将JS函数绑定到单选按钮的onchange或onclick方法时，它找不到该函数，因为它位于d3.json(){};块内（该示例将数据分开以使其工作小提琴，但这条线被注释掉了）。如果我没有将该函数放在该块中，则它无法访问链接和节点，但如果它在内部，则onchange / onclick无法找到它。我不能从html端调用嵌套函数，因为它超出了范围。

无法将属性添加到现有输入单选按钮（不起作用）

然后我尝试动态地将onchange和onclick事件（我尝试了两种方式）添加到JS端的输入，但这似乎不起作用（也许我做错了）。

怎么做？

我试过让＃1在下面工作，但我实际上已经停留在＃1，这让我觉得我正在以错误的方式接近问题。必须有另一种方法来做到这一点。

1. 了解当从单选按钮触发d3.json(){}或onchange事件时如何在onclick块内调用函数。

2. 了解如何根据数据更改节点和链接的不透明度。

This是一个类似的问题，但没有示例，所以我看不到如何应用它。我做有一个字段可以在我的节点对象中进行过滤，但无法弄清楚如何动态地响应单选按钮的选择。

Answer 1

只需在.json回调范围之外的范围内创建对您关注的变量的引用。在这种情况下，它可能是link和node：

var link, node;
d3.json('map2.json', function(error, graph) { 

   ...

   link = container.append("g")
    .attr("class", "links")

   ...

   node = container.append("g")
    .attr("class", "nodes")

   ...

});

然后您可以使用这些是您的单选按钮的更改事件：

d3.selectAll("input[name=filter]").on("change", function(d){

  // value of selected radio
  var value = this.value;
  // everybody
  node.style("opacity", 1);
  // those that aren't dim
  if (value !== "all"){
    value = +this.value;
    node.filter(function(d){
      return d.rating != value;
    })
    .style("opacity", "0.5");
  }

});

正在运行代码here。