选择细线

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

您的问题有不同的解决方案，最简单的解决方案是创建一条透明线，比可见线更粗，这将捕捉鼠标事件：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;