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

Question

我有a jsfiddle here。 When a filter radio button is selected, I want it to dynamically change the opacity of elements and links based on their rating (the node objects have a rating property with an integer value).

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

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

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

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

怎么做？

我尝试让#1 在下面工作，但实际上我被困在#1 上，这让我认为我以错误的方式处理问题。必须有另一种方法来做到这一点。

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

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.