Question

我正在尝试突出散点图上与悬停的id相匹配的所有点。到目前为止，我有这个功能，但它突出了所有的点（或现在把它们变成黑色，但无论如何）。我只需要突出显示实际拥有相同ID的那些。我可以在d上使用parentNode（）获取实际点而不仅仅是数据并构建一个新的点数组并以这种方式突出显示它们吗？感觉就像我错过了一个更直接的解决方案。

      dots.on('mouseover', function(d) {
          let dotId = '';
           let dot = d3.select(this)
            .datum(function(x) {
                dotId = x.playerId;
                console.log(dotId);
                return this.dataset; });

           dots.each(function(d){
              console.log(d.playerId);
              if (d.playerId === dotId) {
                  dots.style('stroke', 'black');
              }
            });
        });

      dots.on('mouseout', function(d) {
           //remove stuff
      });
  }

Answer 1

如果我正确理解你的问题，那么这样的事情就应该做 -

dots.on('mouseover', function(d) {
  var dotId = d.playerId;

  var matches = dots.filter(function(d) { 
     return d.playerId === dotId;
  })
  .style('stroke', 'black');

});

而不是构建另一个元素数组，您可以过滤dots并修改原始选择的样式。

D3散点图突出显示符合特定数据标准的所有点

1 个答案: