選擇細線

Question

全部！

有線（路徑），我可以選擇。寬度= 1（不變）。 當我嘗試選擇線，很難得到鼠標上線時有困難。

如何在不改變寬度的情況下更輕鬆地選擇細線（更方便）？

感謝

d3.select("path") 
 
    //select line use click 
 
    .on("click", function(d){ 
 
    var flag = d3.select(this).classed("selected"); 
 
    
 
    d3.select(this).classed("selected", !flag); 
 
    });

svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #a1a1a1; 
 
} 
 

 
path.link { 
 
    fill: none; 
 
    stroke: #333; 
 
    stroke-width: 1px; 
 
    cursor: default; 
 
} 
 
path.link:hover, path.link.selected { 
 
    stroke: rgb(94, 196, 204); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg> 
 
    <path class="link" d="M550,100L545,100L545,100L545,30L665,30L665,40"></path> 
 
</svg>

Answer 1

有你的問題不同的解決方案，最簡單的是創造一個透明的線，比可見一個，這將捕捉鼠標事件厚：

d3.select(".transparent").on("mouseover", function(){ 
 
    d3.select(".link").style("stroke", "rgb(94, 196, 204)"); 
 
}).on("mouseout", function(){ 
 
    d3.select(".link").style("stroke", "#333") 
 
});

svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #a1a1a1; 
 
} 
 

 
path.link { 
 
    fill: none; 
 
    stroke: #333; 
 
    stroke-width: 1px; 
 
    cursor: default; 
 
} 
 

 
path.transparent { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width:10px; 
 
    cursor: default; 
 
    opacity: 0; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <path class="link" d="M550,100L545,100L545,100L545,30L665,30L665,40" transform="translate(-400,0)"></path> 
 
    <path class="transparent" d="M550,100L545,100L545,100L545,30L665,30L665,40" transform="translate(-400,0)"></path> 
 
</svg>