Comment définir la couleur d'arrière-plan d'un D3.js svg?

Je ne suis pas très bien dans le style D3.js SVG est. J'ai créer un réductible arbre, et de fournir une option pour télécharger cet arbre SVG/PDF/PNG. Cela fonctionne très bien mais la couleur d'arrière-plan les fichiers résultants est toujours transparente. Est-il possible de créer le D3 SVG avec une couleur d'arrière-plan? J'ai utilisé cet exemple pour mon travail:

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

Merci!

  • Simplement svg {background-color:red;} semble fonctionner pour moi.
  • Cela sera inclus lorsque vous exportez le dessin au format PDF, PNG, si?
  • .style("background-color", 'red');
  • même si vos solutions de travail, ils ne sont pas un standard du w3C (en savoir plus stackoverflow.com/questions/11293026/... et w3.org/TR/SVG/styling.html)
  • Pleaes lire mon commentaire à tewathia
InformationsquelleAutor user3017615 | 2013-11-22
  1. 54

    Il suffit d'ajouter une <rect> que la première peinture poste de commande qui affiche la couleur que vous voulez.

    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 + ")");
    • Pas sûr que cela fonctionne si vous avez besoin de svg.selectAll("rect") pour un graphique à barres?
    • Eh bien, ne le faites pas, sélectionnez quelque chose de plus spécifique au lieu.
    InformationsquelleAutor Robert Longson
  2. 24

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

    Par exemple, sur la création de l'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;
}
    InformationsquelleAutor Ismael Hasan