添加背景到svg折线

Question

我正在尝试为svg折线添加类似叠加效果。基本目标是轻松点击线条，因为线条太薄，我想添加一个背景叠加层，在悬停时会发光。

我尝试使用多边形的以下方法，但这看起来很乏味。 （该行总是由3个段组成）

是否有一种非常复杂的方法来实现目标。

还是有更好的方法让这条线更容易点击吗？

$("#MyKendoGrid").kendoGrid({
    dataSource: myDataSource,
    //
    // other properties
    //
    edit: function (e) {
        $("#MyKendoGrid .k-grid-content table tr:first").remove();
    }
});

function draw(x1, y1, x2, y2) {

  var svg = d3.select("#canvas");

  var overlay = svg.append("polygon")
    .style("fill", "yellow")
    .style("opacity", "0")
    .attr("points", function() {
      var s = 5,
        h = 20;
      var p1 = [x1, y1 - s],
        p2 = [x1 + h + s, y1 - s],
        p3 = [x2 - h + s, y2 - s],
        p4 = [x2, y2 - s],
        p5 = [x2, y2 + s],
        p6 = [x2 - h - s, y2 + s],
        p7 = [x1 + h - s, y1 + s],
        p8 = [x1, y1 + s];
      return p1 + " " + p2 + " " + p3 + " " + p4 + " " + p5 + " " + p6 + " " + p7 + " " + p8;
    })
    .on("mouseover", function() {
      d3.select(this).style("opacity", "0.5");
    })
    .on("mouseleave", function() {
      d3.select(this).style("opacity", "0");
    });
  var line = svg.append("polyline")
    .style("fill", "none")
    .style("stroke", "black")
    .attr("points", function() {
      var margin = 20;
      var p1 = [x1, y1],
        p2 = [x1 + margin, y1],
        p3 = [x2 - margin, y2],
        p4 = [x2, y2];

      return p1 + " " + p2 + " " + p3 + " " + p4;
    });

}
draw(10, 10, 200, 200);

Answer 1

你能否在那个事件上插入另一条不透明度为零的线？像这样：

＆＃13;

＆＃13;

function draw(x1, y1, x2, y2) {

  var svg = d3.select("#canvas");

 /* var overlay = svg.append("polygon")
    .style("fill", "yellow")
    .attr("points", function() {
      var s = 5,
        h = 20;
      var p1 = [x1, y1 - s],
        p2 = [x1 + h + s, y1 - s],
        p3 = [x2 - h + s, y2 - s],
        p4 = [x2, y2 - s],
        p5 = [x2, y2 + s],
        p6 = [x2 - h - s, y2 + s],
        p7 = [x1 + h - s, y1 + s],
        p8 = [x1, y1 + s];
      return p1 + " " + p2 + " " + p3 + " " + p4 + " " + p5 + " " + p6 + " " + p7 + " " + p8;
    });
  */
  
  var lineBackround = svg.append("polyline")
    .style("fill", "none")
    .style("stroke", "yellow")
    .style('stroke-width',5)
    .style('opacity', 0)//change this to 0 to not see it
    .attr("points", function() {
      var margin = 20;
      var p1 = [x1, y1],
        p2 = [x1 + margin, y1],
        p3 = [x2 - margin, y2],
        p4 = [x2, y2];

      return p1 + " " + p2 + " " + p3 + " " + p4;
    })
    .on('mouseover', function(){
      d3.select(this).style('opacity',1);
      //alert('over')    
    })
      .on('mouseout', function(){
      d3.select(this).style('opacity',0);
      //alert('over')    
    })
  
  
  var line = svg.append("polyline")
    .style("fill", "none")
    .style("stroke", "black")
    .attr("points", function() {
      var margin = 20;
      var p1 = [x1, y1],
        p2 = [x1 + margin, y1],
        p3 = [x2 - margin, y2],
        p4 = [x2, y2];

      return p1 + " " + p2 + " " + p3 + " " + p4;
    })
 
  
  
    

}
draw(10, 10, 200, 200);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<svg height="250" width="500" id="canvas">


</svg>

＆＃13;

＆＃13;

＆＃13;