在一页上生成具有多个D3.js图形的PDF/SVG/PNG [英] Generating PDF/SVG/PNG with multiple D3.js graphs on one page
问题描述
我在网页上有几个D3.js图.当用户单击一个按钮时，新图形将向下滑动，而旧图形将向上滑动.我做了一些研究，发现了一些链接.可以执行我想要的操作的是这里: http://d3export.cancan.cshl.edu/.但是，我无法使其正常工作.这是一个JSFiddle，其中包含一些与我的代码非常相似的代码
这是JS代码
$(function () {
$(".show").click(function () {
$(".targetDiv").slideUp("fast");
if ($("#graph" + $(this).attr("target")).css("display") != "block") {
$("#graph" + $(this).attr("target")).slideDown("fast");
}
});
});
(function () {
// Graph 1 code
show_svg_code();
}) ();
(function () {
// Graph 2 code
show_svg_code();
}) ();
// ... etc.
function submit_download_form(output_format) {
var tmp = document.getElementById(/* What ID goes here? */);
var svg = tmp.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
var form = document.getElementById("svgform");
form['output_format'].value = output_format;
form['data'].value = svg_xml ;
form.submit();
}
function show_svg_code() {
var tmp = document.getElementById("#graph1");
var svg = tmp.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
$("#svg_code").text(svg_xml);
}
$(document).ready(function() {
$("#save_as_svg").click(function() { submit_download_form("svg"); });
$("#save_as_pdf").click(function() { submit_download_form("pdf"); });
$("#save_as_png").click(function() { submit_download_form("png"); });
});
以下是与我类似的HTML
<a class="show" target="1">Chart 1</a>
<a class="show" target="2">Chart 2</a>
// ... etc.
<button type="button" onclick="javascript:submit_download_form('svg')">SVG</button>
<button type="button" onclick="javascript:submit_download_form('pdf')">PDF</button>
<button type="button" onclick="javascript:submit_download_form('png')">PNG</button>
<div id="graph1" class="targetDiv"></div>
<div id="graph2" class="targetDiv"></div>
// ... etc.
<form id="svgform" method="post" action="download.pl">
<input type="hidden" id="output_format" name="output_format" value="">
<input type="hidden" id="data" name="data" value="">
</form>
我遇到的问题是页面上有1个以上的图表.我有近30个图表，所有图表都隐藏了(显示的除外).我将如何解决这个问题?在JS中，它要求目标图的ID.如何获得仅定位显示的图形的目标?最好也必须在IE，Chrome，Firefox和Safari中运行.
感谢所有帮助
我看到他链接到一个Perl脚本.我将文件保存到服务器，但仍然无法正常工作(我将其保存为download.pl，然后尝试将其保存为.html文件所在的文件夹，然后尝试将其保存至同一文件夹中.作为.js文件).
我的服务器上缺少libRSVG插件.我下载了文件夹(V. 2.37.0.tar.xz)，但是其中有大约一百个文件.我该怎么办?
所以我最终要做的是使用 SVG Crowbar .它使您可以在一页上下载多个SVG元素.带有下载的页面上的每个SVG元素上都会弹出一个内联窗口.但是，存在一些问题. 1)在Internet Explorer中不起作用. 2)当用户在Chrome中下载时，它采用外部CSS样式，但是当用户在Firefox中下载时，它不采用外部CSS样式. 3)显示隐藏的SVG元素的下载按钮.
要解决此问题，我将所有样式都更改为嵌入式样式，而将外部样式保留为后备样式.我只是在页面顶部留下了一条消息，指示用户如果使用IE，则安装Chrome或Firefox.至于隐藏元素问题，我最终将每个图移动到新页面，但是我敢肯定有一些简单的方法可以只针对显示的图显示它们.
我发现的另一件事是，当用户完成下载后，我无法回到原始屏幕.我确定这只是我的问题.
I have several D3.js graphs on a webpage. When the user clicks on a button, the new graph will slide down, while the old one will slide up. I did some research, and found a few links. The one that does what I want to do is here: http://d3export.cancan.cshl.edu/. However, I cannot get it to work. Here is a JSFiddle with some code that is very similar to mine
Here is the JS code
$(function () {
$(".show").click(function () {
$(".targetDiv").slideUp("fast");
if ($("#graph" + $(this).attr("target")).css("display") != "block") {
$("#graph" + $(this).attr("target")).slideDown("fast");
}
});
});
(function () {
// Graph 1 code
show_svg_code();
}) ();
(function () {
// Graph 2 code
show_svg_code();
}) ();
// ... etc.
function submit_download_form(output_format) {
var tmp = document.getElementById(/* What ID goes here? */);
var svg = tmp.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
var form = document.getElementById("svgform");
form['output_format'].value = output_format;
form['data'].value = svg_xml ;
form.submit();
}
function show_svg_code() {
var tmp = document.getElementById("#graph1");
var svg = tmp.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
$("#svg_code").text(svg_xml);
}
$(document).ready(function() {
$("#save_as_svg").click(function() { submit_download_form("svg"); });
$("#save_as_pdf").click(function() { submit_download_form("pdf"); });
$("#save_as_png").click(function() { submit_download_form("png"); });
});
Here is similar HTML to mine
<a class="show" target="1">Chart 1</a>
<a class="show" target="2">Chart 2</a>
// ... etc.
<button type="button" onclick="javascript:submit_download_form('svg')">SVG</button>
<button type="button" onclick="javascript:submit_download_form('pdf')">PDF</button>
<button type="button" onclick="javascript:submit_download_form('png')">PNG</button>
<div id="graph1" class="targetDiv"></div>
<div id="graph2" class="targetDiv"></div>
// ... etc.
<form id="svgform" method="post" action="download.pl">
<input type="hidden" id="output_format" name="output_format" value="">
<input type="hidden" id="data" name="data" value="">
</form>
The problem that I am having is that I have more than 1 chart on the page. I have close to 30 graphs, with all of them hidden (besides the one that is shown). How would I get around this? In the JS, it asks for the ID of the target graph. How do I get it to target only the graph that is shown? This also has to work in IE, Chrome, Firefox and Safari, preferably.
Thanks for all the help
EDIT: I see that there is a Perl script that he links to. I saved the file to my server, and it still does not work (I saved it as download.pl, and I tried to save it in the same folder as the .html file, and then I tried to save it in the same folder as the .js file).
EDIT 2: I am missing the libRSVG plugin on my server. I downloaded the folder (V. 2.37.0.tar.xz), but there is about a hundred files in it. What do I do with it?
So what I ended up doing was using SVG Crowbar. It allows you to download multiple SVG elements on one page. A little inline window popups up over each SVG element that is on the page with a download. However, there are some problems. 1) It doesn't work in Internet Explorer. 2) It takes the external CSS styles when the user downloads in Chrome, but it does not take the external CSS styles when the user downloads in Firefox. 3) It shows the download button for hidden SVG elements.
To work around this, I changed all of the styles to inline styles, and left the external ones as a fallback. And I just left a message at the top of the page instructing users to install Chrome or Firefox if they are using IE. As for the hidden element problem, I ended up moving each graph to a new page, but I'm sure there is some easy way to only show them for the displayed graphs.
Another thing I found was that I couldn't go back to the original screen when the user was done downloading. I'm sure this was just a problem on my end.
这篇关于在一页上生成具有多个D3.js图形的PDF/SVG/PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
