Erstellen einer Grenze um Ihre D3-Grafik

Question

So habe ich gerade meine D3-Reise begonnen, und wollte fragen, wie man einen kleinen 1px Grenze um das Diagramm erstellen würde.

Ich habe die Variablen "border" und "bordercolor" erstellt und dann habe ich .attr ("border", border) zum var svg = d3.select ("body") Teil meines Codes hinzugefügt. Es stürzt nicht ab, aber ich bekomme auch keine Grenze.

Ich denke, die Frage ist, wie füge ich diese Grenze, und wenn jemand erklären könnte, warum, was ich getan habe, ist falsch.

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

Answer 1

Die Svg var ist nur ein Container. Sie müssen dem Container einen Pfad oder ein Element hinzufügen und ihm dann die gewünschte Strichfarbe und -breite für den Rahmen zuweisen. Es gibt mehr als eine Möglichkeit, dies zu tun. In this gist Ich habe es durch eine rect mit den folgenden Werten hinzu:

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

Answer 2

den Stil-Attribut Verwenden Sie einen Umriss um das svg zu platzieren:

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

Answer 3

einfach CSS:

svg { 
    border:1px solid black; 
} 

Answer 4

IMHO ist es besser, getrennt zu halten Form von Stil Anweisungen:

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