操縱d3.js鼠標懸停「災區」

我想顯示和隱藏在SVG節點時鼠標懸停/鼠標移出，問題是，我的節點內部形狀的路徑只有1.5px的寬度，因此在mouseover事件中不容易觸及該區域，這對用戶體驗來說確實不方便。操縱d3.js鼠標懸停「災區」

我想知道是否有辦法讓命中區域更寬使用任意寬度但用戶不可見？

我的代碼片段：

link.enter() 
    .append('g').attr('class', 'link') 
    .append('line') 
    .attr('class', 'path') 
    .attr('marker-end', function(d, i) { 
     if (i === 2) { 
      return 'url(#arrow)'; 
     } else { 
      return null; 
     } 
    }).on('mouseover', function(d) { 
     //alert(JSON.stringify(d)); 
     alert('mouseover'); 
    }).on('mouseout', function(d) { 
     alert('mouseout'); 
    });

的CSS：

.node .path { 
    stroke: #878f8f; 
    stroke-width: 1.5px; 
    fill:none; 
}

來源

2014-12-01 jack.the.ripper

你可以用透明的行程和大行程寬度另一個line添加到g，這將增加命中區。

// Subscribe to mouse events on the entire g 
gEnter = link.enter() 
    .append('g') 
    .attr('class', 'link') 
    .on('mouseover', function(d) { 
     //alert(JSON.stringify(d)); 
     alert('mouseover'); 
    }).on('mouseout', function(d) { 
     alert('mouseout'); 
    }); 

// Instead of 1 line, append 2 lines inside the g, and make 
// one of them transparent and "fat", which will enlarge the 
// hit area 
lines = gEnter 
    .selectAll('.path').data(['visible', 'invisible']) 
lines.enter() 
    .append('line') 
    .attr('class', 'path') 
    .attr('marker-end', function(d, i, j) { 
     // j is the parent's i 
     if (j === 2) { 
      return 'url(#arrow)'; 
     } else { 
      return null; 
     } 
    }) 
    .attr({ 
     // returning null from these functions simply defaults to whatever the 
     // .path class's CSS props are doing 
     'stroke-width': function(d, i) { return d == 'invisible' ? 10 : null }, 
     'stroke': function(d, i) { return d == 'invisible' ? 'transparent' : null } 
    })

來源

2014-12-02 00:00:36 meetamit

我最終以一種稍微不同的方式做了這件事，但絕對是你的回答讓我有了走向正確的道路！謝謝您的幫助！ +25！乾杯！ – 2014-12-02 15:33:01

你是如何定義link在這裏？我無法弄清楚你的解決方案，但我遵循了將父項g元素附加兩行（一個可見和另一個可見）的相同想法。我不認爲它效率太高，因爲我最終不得不要求兩次線座標（一次爲可見線，一次爲不可見線）。這是我做過什麼：

//define the link element in a parent g 
var link = svg.selectAll("g.link") 
       .data(json.links) 
       .enter().append("g") 
       .on("click", linkMouseClick) 
       .on("mouseover", linkMouseover); 

//append a visible child line to parent g 
var line = link.append("line") 
       .attr("class", "link") 
       .style("stroke-width", "2"); 

//append a second, fatter line to g and make it invisible 
var fatline = link.append("line") 
        .attr("class", "link") 
        .attr("style", "stroke:transparent;stroke-width:10px"); 

//call for line coordinates for both lines 
force.on("tick", function() { 
    line.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    fatline.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

});

它的工作原理，但如果任何人都可以提出改進意見，那將是巨大的，謝謝！

來源

2016-01-14 14:21:28 user1299024

操縱d3.js鼠標懸停「災區」

回答

相關問題