1. ホーム
  2. javascript

[解決済み] D3.jsのsvgの背景色を設定する方法は?

2022-02-11 23:50:48

質問

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

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

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

解決方法は?

ただ単に <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 + ")");