0

我对以下代码有疑问。鼠标悬停的图形周围应出现黄色边框。'mouseover'/'mouseout' 事件仅针对 Chart 类的最后一个实例触发。将鼠标悬停在 Chart 的第一个和第二个实例上会在 Chart 的最后一个实例上产生 mouseover/mouseout 事件。我在 Firefox、Safari 和 Chrome 下测试了这段代码，结果相同。为什么-我做错了什么？

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

1 回答 1

0

两个（可能的）原因是您有一个透明元素覆盖链接到每个图形的页面（并且因为第三个图形是最后绘制的，它在顶部结束）拦截所有鼠标移动，或者您的事件处理程序中有一些问题分配（如重复使用的参考）。

您可以使用 firebug（或其他等效的浏览器）来测试透明元素（只需右键单击并“在此处检查”，然后查看它在 DOM 对象图中的位置）。要测试事件处理程序分配，请尝试将代码的最后一步更改为：

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);
    })

因为在处理程序内部，这将被设置为触发事件的元素 - 因此，如果您真的将鼠标悬停在图表 2 上，那么应该将其设置为 Chart2，因此 Chart2 将获得背景。

如果这不起作用，我可以建议您将代码放入 jsfiddle 中（包括任何其他 JS / CSS / 等，以便人们可以实际使用它并自己查看问题。

编辑：更新以更正选择树。

于 2012-11-02T01:19:29.740 回答