基于单选按钮滤波的d3力图中链路和节点的动态变化不透明度
基于单选按钮滤波的d3力图中链路和节点的动态变化不透明度
提问于 2016-09-17 19:57:49
我有这里的小提琴。当选择filter单选按钮时，我希望它能够根据元素和链接的评级动态地更改它们的不透明度(节点对象具有一个整数值的rating属性)。
不能简单地使用onchange/onclick，因为函数是嵌套的
当我将JS函数绑定到单选按钮的onchange或onclick方法时，它找不到该函数，因为它位于d3.json(){};块内(示例中的数据被分隔开，以使其在小提琴上工作，但这一行将被注释掉)。如果我不把函数放在那个块中，它就不能访问链接和节点，但是如果它在里面，onchange/onclick就找不到它。我不能从html端调用嵌套函数，因为它超出了作用域。
无法将as属性添加到现有的输入单选按钮(不工作)
然后，我尝试将onchange和onclick事件(我尝试了两种方法)动态地添加到JS端的输入中，但这似乎不起作用(也许我做错了)。
怎么做？
我试着让第一名在下面工作，但实际上我被第一名困住了，这让我觉得我对待这个问题的方式是错误的。一定还有别的办法可以做到的。
- 了解如何在从单选按钮触发
d3.json(){}或onclick事件时调用onchange块内的函数。 - 找出如何根据节点和链接的数据改变它们的不透明度。
这是一个类似的问题，但是没有例子，所以我看不出如何应用它。在我的节点对象中，我确实有一个字段可供筛选，但我不知道如何动态地响应单选按钮选择。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-17 21:34:18
只需在.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");
}
});运行代码这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39551138
复制相关文章
相似问题
腾讯云开发者
