2

今、私は一つの問題に苦しんでいます。以下に示すコードを見てください。私は 2 つの機能を実装したいと考えています。マウスがその上にあります。

しかし、rect の "pointer-event" の値を all に設定すると、ズームはうまくいきますが、ノードはマウスオーバー イベントをキャッチできません。値を「なし」に設定すると、ノードはマウスオーバー イベントをキャッチできますが、ズームは機能しません。「nodes」と「rect」は別のレイヤーにあるようで、同時にイベントをキャッチすることはできません。

誰でもこれを修正する方法を知っていますか? 前もって感謝します。

    var zoom = d3.behavior.zoom()
        .scaleExtent([0.1, 10])
        .on("zoom", zoomed);
    function zoomed() {
        container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
    }

    var container = svg.append("g");
    var rect = svg.append("rect")
        .attr("width", width/2)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .call(zoom);
    var node = container.append("g")
        .attr("class", "nodes")
        .selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("id",function(d){return d.userID});
    node.on("mouseover", function(d) {      
        alert(d.userID);
    });
4

1 に答える 1

2

問題は、背景の四角形の前にコンテナ div を追加していることです。この場合、コンテナ グループとノードがその要素の下にあるため、マウス イベントのターゲットは四角形になります。このコードを試してください。

var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 10])
    .on("zoom", zoomed);

function zoomed() {
    container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
}

var rect = svg.append("rect") //Append background rect first
    .attr("width", width/2)
    .attr("height", height)
    .style("fill", "none")    
    .style("pointer-events", "all")    
    .call(zoom);

var container = svg.append("g"); //Then append the container group

var node = container.append("g")
    .attr("class", "nodes")
    .selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("id",function(d){return d.userID});

node.on("mouseover", function(d) {      
    alert(d.userID);
});
于 2015-01-27T06:54:09.220 に答える