SaSH_17 SaSH_17 - 24 days ago 10
CSS Question

Add border to a line element of d3js

I am trying to add a black border to a line element of the d3js library. How can I do that ? I tried it with following Code:

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

SVG elements don't have border. Please check this list: https://www.w3.org/TR/SVG/propidx.html

That being said, the simple alternative is making another line, with the colour you want, a little bit thicker:

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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Comments