web-dev-qa-db-ja.com

D3.js svgの背景色を設定する方法は？

私はD3.js SVGのスタイリングについてあまり詳しくありません。折りたたみ可能なツリーを作成し、このツリーをSVG/PDF/PNGとしてダウンロードするオプションを提供します。これはうまく機能しますが、結果のファイルの背景色は常に透明です。特定の背景色でD3 SVGを作成する可能性はありますか？私は自分の仕事にこの例を使用しました。

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

ありがとうございました！

javascriptsvgd3.js
35
user3017615

<rect>を、希望する色を表示する最初のペイントオーダーアイテムとして追加するだけです。

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

SVGを別のHTMLコンポーネントとして使用でき、そのCSSプロパティを設定できます。

たとえば、svgの作成時に、クラスを設定します。

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

CSSでプロパティを定義できます：

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