调整SVG的大小以进行精确打印

时间:2013-09-02 14:08:55

标签: d3.js resize

我正在开展一个小项目来打印缩小的射箭目标,以便在室内较短距离内练习。例如,目标面部显示为here

enter image description here

......全尺寸直径16厘米,20码,但需要打印一半大小,以便练习10码。有许多不同风格的目标面孔,我想尽可能多地支持。我让D3工作从CSV文件中提取相关尺寸。

我尽可能以厘米为单位指定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合作的好介绍。

0 个答案:

没有答案