我认为我的标题总结了我的问题。如果我将鼠标悬停在 d3 map 中的一个状态上，如何更改一组预设的其他状态的颜色？
我可以做类似的事情..
.on("mouseover", function(d,i) {
if this == (one of the present map selections){
d3.select({theotherdataname}}.parentNode.appendChild({{theotherdataname??}})).transition().duration(300)
.style({'stroke-opacity':1,'stroke':'#F00'});
}
}
});
好吧，这是糟糕的代码。但我想提供一些东西来开始。
有人可以给我指出正确的方向吗？
也许我需要完全更新图表数据？
最佳答案
使用 D3 的 filter 方法查找所有其他状态，然后应用样式。
http://devdocs.io/d3/selections#filter
演示:http://jsbin.com/yejuwa/2/edit
JS:
document.addEventListener('DOMContentLoaded', function(){
d3.select('#specific').on('mouseover', function(d, i) {
var currentState = this;
var thoseStates = d3
.selectAll('.those')[0]
.filter(function(state) {
return state !== currentState;
});
d3.selectAll(thoseStates)
.transition()
.duration(300)
.style({
'stroke-opacity': 1,
'stroke': '#f00'
});
});
});
HTML:
<body>
<svg width="150" height="150">
<circle id="specific" class="these" cx="75" cy="75" r="50" fill="yellow" stroke="blue" stroke-width="4" />
</svg>
<svg width="150" height="150">
<rect class="those" width="50" height="50" fill="pink" stroke="green" stroke-width="4" />
</svg>
</body>
关于javascript - 鼠标悬停在一种状态上时，使用 d3 map 更改其他状态的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24837575/