将鼠标悬停在一个图表上，影响其他图表 d3.js

我有两个链接到同一数据源的条形图。

当我将鼠标悬停在第一个图表上的一个条形时，我的目标是能够影响第二个图表上的关联条形（例如突出显示这些条形）。

目标与此处类似。但是使用我现有的代码，每当我将鼠标悬停在一个图表上的一个条形时，两个图表中的所有条形都会突出显示。

有人有解决方案吗？谢谢

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #chart_01 {
                height: 40px;
                position: relative;
                width: 360px;
            }
            #chart_02 {
                height: 40px;
                position: relative;
                width: 360px;
            }

        </style>
        <meta charset = "UTF-8">
        <script src = "https://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
    </head>
    <body>
        <div id = "chart_01">
            <h2>Chart 01</h2>
            <script>
                var source = [{
                            x: 3,
                            y: 6
                        }, {
                            x: 8,
                            y: 40
                        }, {
                            x: 9,
                            y: 10
                        }];
                var canvas_01 = d3.select("body")
                    .append("svg")
                    .attr("width", 500)
                    .attr("height", 200)
                canvas_01.selectAll(".sweetpoint")
                    .data(source)
                    .enter()
                        .append("rect")
                        .classed("sweetpoint", true)
                        .attr("width", function(data_){return data_.x * 40;})
                        .attr("height", 10)
                        .attr("y", function(data_, index_){return index_ * 30;})
                        .attr("fill", "#e4e4e4")
                        .on("mouseover", function(data_, index_){
                            d3.selectAll(".sweetpoint").style("fill", "#696969");
                        })
                        .on("mousemove", function(data_, index_){
                        })
                        .on("mouseout", function(data_, index_){
                            d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
                        })
            </script>
        </div>
        <div id = "chart_02">
            <h2>Chart 02</h2>
            <script>
                var canvas_02 = d3.select("body")
                    .append("svg")
                    .attr("width", 500)
                    .attr("height", 200)
                canvas_02.selectAll(".sweetpoint")
                    .data(source)
                    .enter()
                        .append("rect")
                        .classed("sweetpoint", true)
                        .attr("width", function(data_){return data_.x * 10;})
                        .attr("height", 10)
                        .attr("y", function(data_, index_){return index_ * 30;})
                        .attr("fill", "#e4e4e4")
                        .on("mouseover", function(data_, index_){
                            d3.selectAll(".sweetpoint").style("fill", "#696969");
                        })
                        .on("mousemove", function(data_, index_){
                        })
                        .on("mouseout", function(data_, index_){
                            d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
                        })
            </script>
        </div>
    </body>
</html>

我重写了你的代码。这是你需要的行为吗？注意mouseover事件的处理程序函数。在这里，您应该为悬停的条形设置适当的样式，您可以使用d3.select(this) 和另一个图表上的关联条形设置适当的样式，您可以使用悬停元素的索引获得这些样式。

...
.on("mouseover", function(data_, index_) {
  d3.select(this).style("fill", "#696969");
  canvas_02
  .selectAll('.sweetpoint')
  .filter(function(d, i) {
    return i === index_
  })
  .style("fill", "#696969");
})
...

var source = [{
  x: 3,
  y: 6
}, {
  x: 8,
  y: 40
}, {
  x: 9,
  y: 10
}];
var canvas_01 = d3.select("#chart_01")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200)
canvas_01.selectAll(".sweetpoint")
  .data(source)
  .enter()
  .append("rect")
  .classed("sweetpoint", true)
  .attr("width", function(data_) {
    return data_.x * 40;
  })
  .attr("height", 10)
  .attr("y", function(data_, index_) {
    return index_ * 30;
  })
  .attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_) {
    d3.select(this).style("fill", "#696969");
    canvas_02
      .selectAll('.sweetpoint')
      .filter(function(d, i) {
        return i === index_
      })
      .style("fill", "#696969");
  })
  .on("mousemove", function(data_, index_) {})
  .on("mouseout", function(data_, index_) {
    d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
  })
var canvas_02 = d3.select("#chart_02")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200)
canvas_02.selectAll(".sweetpoint")
  .data(source)
  .enter()
  .append("rect")
  .classed("sweetpoint", true)
  .attr("width", function(data_) {
    return data_.x * 10;
  })
  .attr("height", 10)
  .attr("y", function(data_, index_) {
    return index_ * 30;
  })
  .attr("fill", "#e4e4e4")
.on("mouseover", function(data_, index_) {
    d3.select(this).style("fill", "#696969");
    canvas_01
      .selectAll('.sweetpoint')
      .filter(function(d, i) {
        return i === index_
      })
      .style("fill", "#696969");
  })
  .on("mousemove", function(data_, index_) {})
  .on("mouseout", function(data_, index_) {
    d3.selectAll(".sweetpoint").style("fill", "#e4e4e4");
  })

#chart_01 {
  height: 110px;
  position: relative;
  width: 360px;
}
#chart_02 {
  height: 110px;
  position: relative;
  width: 360px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<div id="chart_01">
  <h2>Chart 01</h2>
</div>
<div id="chart_02">
  <h2>Chart 02</h2>
</div>

相关内容

最新更新

热门标签：