Выберите тонкую линию

Question

Все!

Есть линии (путь), которые я могу выбрать. width = 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>