19

So I've just started my D3 journey, and wanted to ask about how one would create a small 1px border around the chart.

I created the variables "border" and "bordercolor" and then I added .attr("border",border) to the var svg = d3.select("body") portion of my code. It doesn't crash, but I get no border either.

I guess the question is how do i add this border, and if someone could explain why what i did is wrong.

<script type="text/javascript">
    //Width and height
    var w = 800;
    var h = 400;
    var padding = 20;
    var border=1;
    var bordercolor='black';

    var dataset = [
                    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45],
                    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, 90], [3,-90]
                  ];

        // create scale functions
        var xScale = d3.scale.linear()
                         .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })])
                         .range([padding, w - padding * 2]);

    var yScale = d3.scale.linear()
                         .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })])
                         .range([h - padding, padding]);

        var rScale = d3.scale.linear()
        .domain(  [-100,      d3.max(dataset, function(d) { return d[1];            })]   )
        .range([2,5]);

    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("border",border)
                ;

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
            return xScale(d[0]);
       })
       .attr("cy", function(d) {
            return yScale(d[1]);
       })
       .attr("r", 3);

    svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
    .text(function(d) {
        return d[0] + "," + d[1];
   })
   .attr("x", function(d) {
        return xScale(d[0]);
   })
   .attr("y", function(d) {
        return yScale(d[1]);
   })
    .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "red");
</script>
1
  • An alternative would be using css for drawing the border
    – peter
    Commented Oct 30, 2013 at 7:06

5 Answers 5

32

Use the style attribute to place an outline around the svg:

    //Create SVG element
    var svg = d3.select("body")
             .append("svg")
             .attr("style", "outline: thin solid red;")   //This will do the job
             .attr("width", w)
             .attr("height", h);
27

The svg var is just a container. You need to add a path or element to the container and then give it the stroke color and width you want for your border. There is more than one way to do this. In this gist I did it by adding a rect with the following values:

 var borderPath = svg.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", h)
  .attr("width", w)
  .style("stroke", bordercolor)
  .style("fill", "none")
  .style("stroke-width", border);
1
  • In my case using those directly the stroke was applied to all elements, but not to the border. I had to use the solution of K.K . But do it in a css file instead of directly in the javascript code, it is better to separate your style and attributes. Or at least use the .style like in this answer.
    – sam
    Commented Sep 15, 2014 at 14:50
5

IMHO it's better to keep separated shape from style instructions:

.append("rect")
.attr("x", 5)
.attr("y", 5)
.attr("height", 40)
.attr("width", 50)
.attr("class","foo")
...

CSS:

svg rect.foo {
  fill: white;
  stroke-width: 0.5;
  stroke: grey;
}
1
  • I second this solution, but one improvement I might suggest is to have the solution include the style definitions. This is easier to work with in some contexts/harder in others. svg.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "none").attr("stroke", "#BDBDBD").attr("stroke-width", 4); Commented Apr 13, 2018 at 16:16
4

Simply use css:

svg {
  border:1px solid black;
}
1
  • This adds a border around the who SVG, it's not the same thing. Commented Oct 4, 2015 at 11:39
1

If X and Y Axis are used, other option is to use tickSizeOuter() Example:

var yAxis = d3.axisLeft(y).ticks(5).tickSizeOuter(-width);
var xAxis = d3.axisBottom(x).ticks(5).tickSizeOuter(-height);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.