0

次のコードに問題があります。マウスが置かれているグラフの周囲に黄色の境界線が表示されます。'mouseover' /'mouseout'イベントは、Chartクラスの最後のインスタンスに対してのみ発生します。チャートの最初と2番目のインスタンス化をマウスオーバーすると、チャートの最後のインスタンス化でマウスオーバー/マウスアウトイベントが発生します。このコードを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

2つの（可能性が高い）理由は、各グラフにリンクされたページをオーバーレイする透明な要素があるか（3番目のグラフが最後に描画されるため、上で終了する）、すべてのマウスの動きをインターセプトするか、イベントハンドラーに何か厄介なものがあるかです。割り当て（再利用された参照など）。

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

ハンドラー内では、これはイベントがトリガーされた要素に設定されているため、たとえばChart2のように真にマウスオーバーしている場合は、これをChart2に設定する必要があります。そのため、Chart2が背景を取得します。

これが機能しない場合は、コードをjsfiddle（追加のJS / CSS /などを含む）に入れて、人々が実際にそれを試して問題を自分で確認できるようにすることをお勧めします。

編集：選択ツリーを修正するために更新されました。

于 2012-11-02T01:19:29.740 に答える