d3.js - 正確な印刷のために SVG のサイズを変更する

Question

私は、屋内での短距離での練習用に縮小されたアーチェリー ターゲットを印刷する小さなプロジェクトに取り組んでいます。たとえば、ここに示すターゲットの顔:

...20 ヤードのフルサイズで直径 16 cm ですが、10 ヤードで練習するには、その半分のサイズで印刷する必要があります。ターゲットの顔にはさまざまなスタイルがあり、できるだけ多くのスタイルをサポートしたいと考えています。関連するサイズをCSVファイルから取得するためにD3が機能しています。

可能な限り、SVG の要素のサイズをセンチメートル単位で指定しています。D3 を使用して、特定のサイズで印刷できる PDF を生成することはできますか?

CSV を読み込んで SVG を生成するコードを次に示します。

var dataset;
var w = "16cm";
var h = "16cm";

d3.csv("./data/nfaa5spot.csv", function(error, data) {
    if (error) {
        console.log(error);
    } else {
        console.log(data);

        // Hand data off to global var for processing
        dataset = data;
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "-400,-400,1700,1700");

        var circles = svg.selectAll("circle")
            .data(dataset)
           .enter()
            .append("circle")
            .attr({
                cx: function(d) { return d["cx"]; },
                cy: function(d) { return d["cy"]; },
                r: function(d) { return d["r"]; }
            })
            .style("fill", function(d) { return d["fill"]; })
            .style("stroke", function(d) { return d["stroke"]; })
            .style("stroke-width", function(d) { return d["stroke-width"]; });
    }
});

関連する CSV ファイルの内容は次のとおりです。

r,cx,cy,fill,stroke,stroke-width
16cm,8cm,8cm,#164687,#164687,0
12cm,8cm,8cm,#164687,white,3
8cm,8cm,8cm,white,white,0
4cm,8cm,8cm,white,#164687,3

サイズ変更は最初の部分です。また、短距離での矢のシャフトの直径を補正するために、ターゲット面に追加の線を引く作業も行っています。楽しいプロジェクトであり、D3 を使用するための優れた入門書です。