Question

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

当我鼠标悬停在第一张图表上的其中一个栏上时，我的目标是能够影响第二张图表上的相关栏（例如突出显示这些栏）。

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

有没有人有解决方案？感谢

这是我的代码：

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

Answer 1

我重写了你的代码。这是你需要的行为吗？注意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>

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

1 个答案: