CODEWITHSUNDEEP
d3.js
Fxs7576
Fxs7576

Reputation: 1341

Mouseover on one chart affecting the other chart(s) d3.js

I have two bar charts that are linked to the same data source.

When I mouseover to one of the bars on the first chart, my goal is to be able to affect the associated bar on the second chart (such as highlighting those bars).

The goal is similar to here. But with my existing code, all of the bars from both charts are highlighted whenever I mouseover to one of the bars on one chart.

Does anyone have the solution to this? Thanks

Here is my code:

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

Upvotes: 0

Views: 2147

Answers (1)

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

I rewrote your code. Is it behavior what you need? Pay attention to handler function for mouseover event. Here you should set appropriate styles for the hovered bar, which you can get with d3.select(this), and associated bar on another chart, which you can get using the index of the hovered element.

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

Upvotes: 1

Related Questions