我正在开展一个小项目来打印缩小的射箭目标,以便在室内较短距离内练习。例如,目标面部显示为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合作的好介绍。