2

我正在做一个小项目，打印按比例缩小的射箭目标，以便在室内近距离练习。例如，此处显示的目标人脸：

在此处输入图像描述

...全尺寸直径为 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 的良好介绍。

4

0 回答 0