2

散布図、ネットワーク図、表を含むページを作成しようとしています。ネットワーク図とテーブルでマウスハンドリングを機能させることができました (リンク D3 の @Superboggly の助けを借りて、マウスオーバーでテーブルをレイアウトするネットワーク図を強制します)。今、散布図を使用して2番目のsvgでマウスハンドリングを機能させようとしていますが、参照を台無しにしていると思います。

var mapit = svg2.selectAll("maprect")
    .data(graph.nodes)
    .enter().append("rect")
    .attr("x", function(d) { return xScale(d.long); })
    .attr("y", function(d) { return yScale(d.lat); })
    .attr("height", 20)
    .attr("width", 20)
    .attr("fill", "cyan")
    // This mouseover doesn't work, what am I missing?
    .on("mouseover", function(d) { 
        d3.select(this).select("rect").style("fill", "orange"); 
        })
    .on("mouseout",  function(d) { 
        d3.select(this).select("rect").style("fill", "cyan"); 
        });

私は D3 と JavaScript が初めてで、他の人の例からつなぎ合わせた ... mapit、svg2、maprect、graph.nodes、 ... のコレクションに混乱しています。rect助言がありますか？

この例はjsFiddleとして投稿されています。

4

1 に答える 1

2

あなたはとても近かった！関数内のを削除するだけ.select("rect")です:

.on("mouseover", function(d) { 
    d3.select(this).style("fill", "orange"); 
    })
.on("mouseout",  function(d) { 
    d3.select(this).style("fill", "cyan"); 
    });

更新されたフィドル。

于 2013-05-07T20:20:14.163 に答える