CODEWITHSUNDEEP
d3.js
D3Chiq
D3Chiq

Reputation: 2193

Creating a border around your D3 graph

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>

Upvotes: 19

Views: 52811

Answers (5)

Darius
Darius

Reputation: 596

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

Upvotes: 1

Iwan B.
Iwan B.

Reputation: 4166

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

Upvotes: 5

Can
Can

Reputation: 59

Simply use css:

svg {
  border:1px solid black;
}

Upvotes: 4

K.K
K.K

Reputation: 2657

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

Upvotes: 32

Andrew Staroscik
Andrew Staroscik

Reputation: 2704

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

Upvotes: 27

Related Questions