Home/ Questions/Q 8808215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T02:33:58+00:00

I’m having an issue with the following code. A yellow border should appear around

  • 0

I’m having an issue with the following code. A yellow border should appear around the graph that the mouse is over. The ‘mouseover’/’mouseout’ event only fires for the last instance of the Chart class. Mousing over the first and second instantiations of Chart produce mouseover/mouseout events over the last instantiation of Chart. I’ve tested this code under Firefox, Safari, and Chrome, with the same results. Why is that – what am I doing wrong?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<style>
rect { fill: #fff0e0; stroke: #000; stroke-width: 2.0px; }
.line { fill: none; stroke: steelblue; stroke-width: 3.0px; }
</style>
<body>
<script src="d3.v2.js"></script>

<script>
var kev_vs_rho= [{ 
values: [{x: 0.01, y: 0.2058},{x: 0.03, y: 0.2039},{x: 0.99, y: 23.2020}] }];
kev_vs_rho.minX=0.01; kev_vs_rho.maxX=0.99;
kev_vs_rho.minY=0.01; kev_vs_rho.maxY=33.66;
</script>

<script>
var kev_vs_sec= [{ 
values: [{x: 1.5, y: 0.2058},{x: 9.494, y: 1.6468},{x: 1000.0, y:23.4699}] }];
kev_vs_sec.minX=1.50; kev_vs_sec.maxX=1000.00;
kev_vs_sec.minY=0.01; kev_vs_sec.maxY=33.66;
</script>

<div id="chart1"> </div> <hr/>
<div id="chart2"> </div> <hr/>
<div id="chart3"> </div>

<script>
"use strict";
function Chart ( _width, _height, _data, _anchor ) {
    self = this;
    this.data = _data;
    this.anchor = _anchor;
    this.margin = {top: 30, right: 30, bottom: 30, left: 80};
    this.width = _width - this.margin.left - this.margin.right;
    this.height = _height - this.margin.top - this.margin.bottom;

    this.xscale = d3.scale.linear()
        .domain([this.data.minX, this.data.maxX])
        .range([0, this.width]);

    this.yscale = d3.scale.linear()
        .domain([this.data.minY, this.data.maxY])
        .range([this.height, 0]);

    this.lineA = d3.svg.line()
        .x(function (d) { return self.xscale(d.x); })
        .y(function (d) { return self.yscale(d.y); });

    this.div = d3.select(this.anchor).append("div");
    this.svg = this.div.append("svg")
        .datum(this.data[0].values)
        .attr("width", this.width + this.margin.left + this.margin.right)
        .attr("height", this.height + this.margin.top + this.margin.bottom)
        .append("g")
        .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

    this.svg.append("rect")
        .attr("width", this.width)
        .attr("height", this.height);

    this.lineB = this.svg.append("path")
        .attr("class", "line")
        .attr("d", self.lineA);

    d3.select(this.anchor)
        .on("mouseover", function () {
            self.div.style("background", "yellow");
        })
        .on("mouseout", function () {
            self.div.style("background", null);
        })
};

Chart.prototype.redraw = function() {
    this.lineB
        .datum(this.data[0].values)
        .attr("d", this.lineA);
};

var chart3 = new Chart( 960, 200, kev_vs_rho, "#chart3");
var chart2 = new Chart( 960, 200, kev_vs_sec, "#chart2");
var chart1 = new Chart( 960, 200, kev_vs_rho, "#chart1");

chart1.redraw();
chart2.redraw();
chart3.redraw();

</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the two (likely) reasons are either you have a transparent element overlaying the page linked to each graph (and because the 3rd graph is drawn last, it ends on top) that intercepts all the mouse movements, or there’s something screwy in your event handler assignment (like a re-used reference).

    You can use firebug (or other browsers equivalent) to test for transparent elements (just right click and ‘inspect here’, and see where it drops you in the DOM object graph). To test the event handler assignment, try changing the last step of your code to:

    d3.select(this.anchor)
    .on("mouseover", function () {
        d3.select(this).select("div").style("background", "yellow");
    })
    .on("mouseout", function () {
        d3.select(this).select("div").style("background", null);
    })

    Because inside the handler, this will have been set to the element the event was triggered on – so if you are truely mousing over, e.g., Chart2, then this should be set to Chart2, and Chart2 will therefor get the background.

    If this doesn’t work, can I suggest you put your code into a jsfiddle (including any additional JS / CSS / etc, so that people can actually play with it and see the problem for themselves.

    Edit: updated to correct the selection tree.

    • 0