Créer une bordure autour de votre graphique D3

Donc je viens de commencer mon D3 voyage, et je voulais demander comment on pourrait créer une petite 1px bordure autour du graphique.

J'ai créé les variables "frontière" et "bordercolor" et puis j'ai ajouté .attr("border",à la frontière) pour le var svg = d3.sélectionnez("corps") qui font partie de mon code. Il ne plante pas, mais je n'ai pas de frontière.

Je suppose que la question est comment puis-je ajouter cette frontière, et si quelqu'un pouvait expliquer pourquoi ce que j'ai fait est mal.

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

source d'informationauteur D3Chiq

  1. 21

    Le svg var est juste un conteneur. Vous avez besoin d'ajouter un chemin d'accès ou un élément dans le conteneur, puis lui donner la couleur du contour et de la largeur que vous voulez pour votre frontière. Il n'y a plus d'une façon de le faire. Dans ce gist Je l'ai fait par l'ajout d'un rect avec les valeurs suivantes:

     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);
  2. 19

    Utiliser l'attribut style pour placer un contour autour de l'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);
  3. 4

    À mon humble avis il est préférable de garder séparés forme de 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;
}
  4. 3

    Simplement utiliser les css:

    svg {
border:1px solid black;
}