Javascript D3.js SVG给它一个ID或将SVG添加到PDF 标题 法克图拉布里克街 Kategori 1 10000 卡泰戈里2号 20000 卡泰戈里3号 30000 卡泰戈里4号 40000 Kategori 5 50000 卡泰戈里6号 60000 卡泰戈里7号 70000 Kategori 8 80000 获取PDF //添加事件侦听器 document.getElementById（“getPdf”）.addEventListener（“单击”，getPdf）； 函数getPdf（）{ //以字符串形式获取svg标记 var svg=document.getElementById（'svg-container'）.innerHTML； 如果（svg）svg=svg.replace（/\r？\n |\r/g'）.trim（）； var canvas=document.createElement（'canvas'）； var context=canvas.getContext（'2d'）； clearRect（0，0，canvas.width，canvas.height）； canvg（canvas，svg）； var imgData=canvas.toDataURL（'image/png'）； //生成PDF var doc=新的jsPDF（'p'，'pt'，'a4'）； addImage文件（imgData，'PNG'，40,40,100,100）； //doc.text（20，20，“你好，世界！”）； doc.save（'save'，'test.pdf'）； } 风险值数据=[ $（“#nr1”）.text（）， $（“#nr2”）.text（）， $（“#nr3”）.text（）， $（“#nr4”）.text（）， $（“#nr5”）.text（）， $（“#nr6”）.text（）， $（“#nr7”）.text（）， $（“#nr8”）.text（）； var margin={顶部：20，右侧：10，底部：30，左侧：70}， 宽度=800-边距.左-边距.右， 高度=500-margin.top-margin.bottom； 变量y=d3.scale.linear（） .domain（[0100000]） .范围（[高度，0]）； var x=d3.scale.ordinal（） .rangeRoundBands（[0，宽度]，.1） .domain（d3.entries（data）.map（函数（d）{return“Kategori”+d.key；}））； var xAxis=d3.svg.axis（） .比例（x） .东方（“底部”）； var yAxis=d3.svg.axis（） .比例（y） .东方（“左”）； var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度+边距。左侧+边距。右侧） .attr（“高度”，高度+边距。顶部+边距。底部） .附加（“g”） .attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）； svg.append（“g”） .attr（“类”、“x轴”） .attr（“变换”、“平移（-6、+height+）”） .呼叫（xAxis）； svg.append（“g”） .attr（“类”、“y轴”） .呼叫（yAxis） .append（“文本”） .attr（“变换”、“旋转（-90）”） .attr（“y”，6） .attr（“dy”，“.71em”） .style（“文本锚定”、“结束”） .文本（“克朗”）； var bar=svg.selectAll（） .数据（d3.条目（数据）） .enter（）.append（“rect”） .attr（“x”，函数（d）{return x（“Kategori”+d.key）+x.rangeBand（）/2}） .attr（“宽度”，x.rangeBand（）/2） .attr（“y”，函数（d）{返回y（d.value）；}） .attr（“高度”，函数（d）{返回高度-y（d.value）；}） .样式（“填充”、“#66a3ff”）； 附加条（“文本”） .attr（“x”，函数（d）{return x（“Kategori”+d.key）+x.rangeBand（）/2；}） .attr（“dx”，-3）//右填充 .attr（“dy”，“.35em”）//垂直对齐：中间对齐 .attr（“文本定位”，“结束”）//文本对齐：右 .text（函数（d）{返回d.value；}）；
因此，我使用D3.js生成了一个垂直条形图SVG 然而，有两件事我想不出来Javascript D3.js SVG给它一个ID或将SVG添加到PDF 标题 法克图拉布里克街 Kategori 1 10000 卡泰戈里2号 20000 卡泰戈里3号 30000 卡泰戈里4号 40000 Kategori 5 50000 卡泰戈里6号 60000 卡泰戈里7号 70000 Kategori 8 80000 获取PDF //添加事件侦听器 document.getElementById（“getPdf”）.addEventListener（“单击”，getPdf）； 函数getPdf（）{ //以字符串形式获取svg标记 var svg=document.getElementById（'svg-container'）.innerHTML； 如果（svg）svg=svg.replace（/\r？\n |\r/g'）.trim（）； var canvas=document.createElement（'canvas'）； var context=canvas.getContext（'2d'）； clearRect（0，0，canvas.width，canvas.height）； canvg（canvas，svg）； var imgData=canvas.toDataURL（'image/png'）； //生成PDF var doc=新的jsPDF（'p'，'pt'，'a4'）； addImage文件（imgData，'PNG'，40,40,100,100）； //doc.text（20，20，“你好，世界！”）； doc.save（'save'，'test.pdf'）； } 风险值数据=[ $（“#nr1”）.text（）， $（“#nr2”）.text（）， $（“#nr3”）.text（）， $（“#nr4”）.text（）， $（“#nr5”）.text（）， $（“#nr6”）.text（）， $（“#nr7”）.text（）， $（“#nr8”）.text（）； var margin={顶部：20，右侧：10，底部：30，左侧：70}， 宽度=800-边距.左-边距.右， 高度=500-margin.top-margin.bottom； 变量y=d3.scale.linear（） .domain（[0100000]） .范围（[高度，0]）； var x=d3.scale.ordinal（） .rangeRoundBands（[0，宽度]，.1） .domain（d3.entries（data）.map（函数（d）{return“Kategori”+d.key；}））； var xAxis=d3.svg.axis（） .比例（x） .东方（“底部”）； var yAxis=d3.svg.axis（） .比例（y） .东方（“左”）； var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度+边距。左侧+边距。右侧） .attr（“高度”，高度+边距。顶部+边距。底部） .附加（“g”） .attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）； svg.append（“g”） .attr（“类”、“x轴”） .attr（“变换”、“平移（-6、+height+）”） .呼叫（xAxis）； svg.append（“g”） .attr（“类”、“y轴”） .呼叫（yAxis） .append（“文本”） .attr（“变换”、“旋转（-90）”） .attr（“y”，6） .attr（“dy”，“.71em”） .style（“文本锚定”、“结束”） .文本（“克朗”）； var bar=svg.selectAll（） .数据（d3.条目（数据）） .enter（）.append（“rect”） .attr（“x”，函数（d）{return x（“Kategori”+d.key）+x.rangeBand（）/2}） .attr（“宽度”，x.rangeBand（）/2） .attr（“y”，函数（d）{返回y（d.value）；}） .attr（“高度”，函数（d）{返回高度-y（d.value）；}） .样式（“填充”、“#66a3ff”）； 附加条（“文本”） .attr（“x”，函数（d）{return x（“Kategori”+d.key）+x.rangeBand（）/2；}） .attr（“dx”，-3）//右填充 .attr（“dy”，“.35em”）//垂直对齐：中间对齐 .attr（“文本定位”，“结束”）//文本对齐：右 .text（函数（d）{返回d.value；}）；,javascript,pdf,d3.js,svg,pdf-generation,Javascript,Pdf,D3.js,Svg,Pdf Generation,因此，我使用D3.js生成了一个垂直条形图SVG 然而，有两件事我想不出来 如何给SVG图表一个id，然后用var SVG选择它= document.getElementById（'svg-container'）.innerHTML （目前它将选择一个我用HTML制作的蓝色矩形，并将其放入PDF中） 使用将SVG图表转换为图像或 doc.addSVG将其添加到我的PDF中 我已经解决了这些问题 添加id.attr（“id”，“svg容器”） 使用svg大小而不是画布默认大小 而且它工作得很好
var SVG选择它=
document.getElementById（'svg-container'）.innerHTML
（目前它将选择一个我用HTML制作的蓝色矩形，并将其放入PDF中）我已经解决了这些问题
- 添加id
.attr（“id”，“svg容器”） - 使用svg大小而不是画布默认大小
标题
法克图拉布里克街
Kategori 1
10000
卡泰戈里2号
20000
卡泰戈里3号
30000
卡泰戈里4号
40000
Kategori 5
50000
卡泰戈里6号
60000
卡泰戈里7号
70000
Kategori 8
80000
获取PDF
//添加事件侦听器
document.getElementById（“getPdf”）.addEventListener（“单击”，getPdf）；
函数getPdf（）{
//以字符串形式获取svg标记
var svgElement=document.getElementById（'svg-container'）；
var svg=svgElement.innerHTML；
如果（svg）svg=svg.replace（/\r？\n |\r/g'）.trim（）；
var canvas=document.createElement（'canvas'）；
canvas.width=svgElement.clientWidth；
canvas.height=svgElement.clientHeight；
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
canvg（canvas，svg）；
var imgData=canvas.toDataURL（'image/png'）；
//生成PDF
var doc=新的jsPDF（'p'，'pt'，'a4'）；
addImage文件（imgData，'PNG'，40,40,100,100）；
//doc.text（20，20，“你好，世界！”）；
doc.save（'save'，'test.pdf'）；
}
风险值数据=[
$（“#nr1”）.text（），
$（“#nr2”）.text（），
$（“#nr3”）.text（），
$（“#nr4”）.text（），
$（“#nr5”）.text（），
$（“#nr6”）.text（），
$（“#nr7”）.text（），
$（“#nr8”）.text（）；
var margin={顶部：20，右侧：10，底部：30，左侧：70}，
宽度=800-边距.左-边距.右，
高度=500-margin.top-margin.bottom；
变量y=d3.scale.linear（）
.domain（[0100000]）
.范围（[高度，0]）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）
.domain（d3.entries（data）.map（函数（d）{return“Kategori”+d.key；}））；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.select（“body”）.append（“svg”）.attr（“id”，“svg容器”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<script src="jspdf.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="d3.v3.min.js"></script>
</head>
<body>
<table align="center">
<caption style="text-align: left; font-weight: bold">DETTE ER EN FAKTURABRIK</caption>
<br>
<tr>
<td id="str1">Kategori 1</td>
<td id="nr1">10000</td>
</tr>
<tr>
<td id="str2">Kategori 2</td>
<td id="nr2">20000</td>
</tr>
<tr>
<td id="str3">Kategori 3</td>
<td id="nr3">30000</td>
</tr>
<tr>
<td id="str4">Kategori 4</td>
<td id="nr4">40000</td>
</tr>
<tr>
<td id="str5">Kategori 5</td>
<td id="nr5">50000</td>
</tr>
<tr>
<td id="str6">Kategori 6</td>
<td id="nr6">60000</td>
</tr>
<tr>
<td id="str7">Kategori 7</td>
<td id="nr7">70000</td>
</tr>
<tr>
<td id="str8">Kategori 8</td>
<td id="nr8">80000</td>
</tr>
</table>
<svg class="chart" style="display: block; margin:auto;"></svg>
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<rect height="300" width="300" style="stroke:#f7f7f7; fill: #2440ad" /></svg>
</div>
<div><button id="getPdf">Get PDF</button></div>
<script>//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);
function getPdf() {
//Get svg markup as string
var svg = document.getElementById('svg-container').innerHTML;
if (svg) svg = svg.replace(/\r?\n|\r/g, '').trim();
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
canvg(canvas, svg);
var imgData = canvas.toDataURL('image/png');
// Generate PDF
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 40, 40, 100, 100);
//doc.text(20, 20, 'Hello world!');
doc.save('save', 'test.pdf');
}
</script>
<script type="text/javascript">
var data = [
$("#nr1").text(),
$("#nr2").text(),
$("#nr3").text(),
$("#nr4").text(),
$("#nr5").text(),
$("#nr6").text(),
$("#nr7").text(),
$("#nr8").text()];
var margin = {top: 20, right: 10, bottom: 30, left: 70},
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y = d3.scale.linear()
.domain([0,100000])
.range([height, 0]);
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1)
.domain(d3.entries(data).map(function(d) { return "Kategori " + d.key; }));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(-6," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Kroner");
var bar = svg.selectAll()
.data(d3.entries(data))
.enter().append("rect")
.attr("x", function(d) { return x("Kategori " + d.key) + x.rangeBand()/2 })
.attr("width", x.rangeBand()/2)
.attr("y", function(d) { return y(d.value ); })
.attr("height", function(d) { return height - y(d.value); })
.style( "fill", "#66a3ff" );
bar.append("text")
.attr("x", function(d) { return x("Kategori " + d.key) + x.rangeBand() / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text( function(d) { return d.value; });
</script>
</body>
</html>