d3js弦图中的衰落和弦
d3js弦图中的衰落和弦
提问于 2013-09-29 10:02:01
我完全是d3js的初学者，所以如果我的问题看起来很傻，请耐心点。
我正在尝试复制一个和弦图，像Mike提出的一。在Bostock的代码中，如果您在弧形上使用鼠标，则弧形中不涉及的所有和弦(作为目标和源)都将消失。
我想改变它，以便让所有的和弦褪色，除了有一个鼠标(为了强调一个单一的双向关系)。
我添加了一个fade_single函数，当鼠标超过一个和弦时会触发该函数：
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.style("fill", function(d) { return fill(d.target.index); })
.attr("d", d3.svg.chord().radius(r0))
.style("opacity", 1)
.on("mouseover", fade_single(0.1))
.on("mouseout", fade_single(1));fade_single函数如下：
function fade_single(opacity) {
return function(g, i) {
svg.selectAll("g.chord path")
.filter(function(d) {
//return d.source.index != 0 && d.target.index != 0;
})
.transition()
.style("opacity", opacity);
};
}问题是，我不知道在注释行中放什么，即过滤掉没有单个和弦的行和列的所有关系。我尝试使用这些子索引，但是参数i只给出行，所以我不知道如何将我想要排除的chord从衰落中分离出来。
有什么想法吗？有什么暗示吗？
谢谢,
Elisa
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-29 10:43:05
要淡出除当前元素之外的所有内容，最简单的方法是使用对当前DOM元素的this引用：
function fade_single(opacity) {
return function() {
var me = this;
svg.selectAll("g.chord path")
.filter(function(d) {
return this != me;
})
.transition()
.style("opacity", opacity);
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19081407
复制相关文章
相似问题
腾讯云开发者
