鼠标停留在一个状态上，用d3地图改变其他状态的颜色

On mouseover one state, change colors of other states with d3 map

本文关键字：状态 d3 地图 改变 颜色 其他 停留在 一个 鼠标      更新时间：2023-09-26

我想我的标题概括了我的问题。如果我将鼠标悬停在d3地图中的一个状态上，我该如何改变其他状态的预设组的颜色?

我可以这样做…

.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过滤器

演示: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>
相关文章：