Javascript 在鼠标移动到一个状态上时，使用d3贴图更改其他状态的颜色_Javascript_D3.js

Javascript 在鼠标移动到一个状态上时，使用d3贴图更改其他状态的颜色

javascript d3.js

Javascript 在鼠标移动到一个状态上时，使用d3贴图更改其他状态的颜色,javascript,d3.js,Javascript,D3.js,我想我的题目概括了我的问题。如果我将鼠标悬停在d3地图中的一个状态上，如何更改其他状态预设组的颜色我可以做一些像 .on("mouseover", function(d,i) { if this == (one of the present map selections){ d3.select({theotherdataname}}.parentNode.appendChild({{theotherdataname??}})).transition().duration(300

我想我的题目概括了我的问题。如果我将鼠标悬停在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的

筛选方法查找所有其他状态，然后应用样式

演示：
JS:
HTML:

您需要做的就是选择所有路径（？）并过滤当前状态的路径。不需要添加新元素。好主意。我忘了D3的过滤器@Gilsha您能解释一下为什么在：.selectAll（'.thats'）[0]中使用数组[0]说明符吗？第二个选项中的“thosestates”中似乎有一个双D3.selectAll。我们可能希望将d3分配给这些，然后重新使用变量。
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'
      });

  });

});

<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>