Question

我正在尝试将黑色边框添加到d3js库的line元素中。我怎样才能做到这一点？我尝试使用以下代码：

Plunker：https://plnkr.co/edit/brSPxoRczQcULz3IxXQk?p=preview

CSS：

<style>
   line.linecap {
   border-style:dashed;
   border-width:2px;
   border-color: black;
  }
</style>

的JavaScript

<script>
var line = d3.select("body") 
      .append("svg")  
      .attr("width", 449)     
      .attr("height", 249); 



line.append("line")     
    .style("stroke", "rgb(220, 220, 220)")  
    .attr("stroke-width", 94)
    .classed('linecap', true)
    .attr("x1", 139)
    .attr("y1", 487)      
    .attr("x2", 139)    
    .attr("y2", 92);
</script>

Answer 1

您可以绘制一个矩形（SVG rect）而不是一条线，然后使用stroke可以使用边框。

line.append("rect")     
    .style("stroke-width", "3")
    .style("fill", "none")
    .style("stroke", "rgb(220, 220, 220)") 
    .attr("x", 139)
    .attr("y", 92)      
    .attr("width", 94)    
    .attr("height", 487 - 92 );

Updated plnkr

P.S。绘制的线条在svg边界之外，我没有解决这个问题（为此，只需调整坐标）。

Answer 2

SVG元素没有 border 。请查看此列表：https://www.w3.org/TR/SVG/propidx.html

话虽这么说，简单的替代方案是制作另一条线，你想要的颜色稍微厚一点：

＆＃13;

var line = d3.select("body") 
          .append("svg")  
          .attr("width", 500)     
          .attr("height", 300); 

    line.append("line")     
        .style("stroke", "red")  
        .attr("stroke-width", 96)
        .classed('linecap', true)
        .attr("x1", 139)
        .attr("y1", 291)      
        .attr("x2", 139)    
        .attr("y2", 9);

    line.append("line")     
        .style("stroke", "rgb(220, 220, 220)")  
        .attr("stroke-width", 94)
        .classed('linecap', true)
        .attr("x1", 139)
        .attr("y1", 290)      
        .attr("x2", 139)    
        .attr("y2", 10);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

将边框添加到d3js的线元素

2 个答案: