web-dev-qa-db-fra.com

Comment définir la couleur de fond d'un svg D3.js?

Je ne connais pas très bien le style des SVG D3.js. Je crée un arbre pliable et fournirai une option pour télécharger cet arbre en SVG/PDF/PNG. Cela fonctionne très bien mais la couleur d'arrière-plan des fichiers résultants est toujours transparente. Est-il possible de créer le D3 SVG avec une couleur de fond spécifique? J'ai utilisé cet exemple pour mon travail:

http://bl.ocks.org/mbostock/433908

Merci!

javascriptsvgd3.js
35
user3017615

Ajoutez simplement un <rect> comme premier élément de commande de peinture affichant la couleur souhaitée.

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom);

svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "pink");

svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
54
Robert Longson

Vous pouvez utiliser le SVG comme un autre composant HTML, vous pouvez définir ses propriétés CSS:

Par exemple, lors de la création du svg, vous définissez une classe:

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", "graph-svg-component");

Dans votre CSS, vous pouvez définir la propriété:

.graph-svg-component {
    background-color: AliceBlue;
}
24
Ismael Hasan