Javascript 如何自动保存动态生成的HTML SVG元素
我用D3.js生成了一个SVG，我想在没有用户交互的情况下将它保存到我的计算机中，就像SVG文件或图像文件一样。我试过一些方法，但没有找到答案 这是我的密码：Javascript 如何自动保存动态生成的HTML SVG元素,javascript,html,d3.js,svg,Javascript,Html,D3.js,Svg,我用D3.js生成了一个SVG，我想在没有用户交互的情况下将它保存到我的计算机中，就像SVG文件或图像文件一样。我试过一些方法，但没有找到答案 这是我的密码： <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools |
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var lineData = [{
x: 1,
y: 5
}, {
x: 20,
y: 20
}, {
x: 40,
y: 10
}, {
x: 60,
y: 40
}, {
x: 80,
y: 5
}, {
x: 100,
y: 60
}];
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
return d.x;
}), d3.max(lineData, function(d) {
return d.x;
})]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
return d.y;
}), d3.max(lineData, function(d) {
return d.y;
})]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function(d) {
return xRange(d.x);
})
.y(function(d) {
return yRange(d.y);
})
.interpolate("linear");
vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
</script>
</body>
</html>
变量lineData=[{
x:1，
y:5
}, {
x:20，
y:20
}, {
x:40，
y:10
}, {
x:60，
y:40
}, {
x:80，
y:5
}, {
x:100，
y:60
}];
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前20名，
右:20,，
底数：20，
左：50
},
xRange=d3.scale.linear（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain（[d3.min（lineData，function（d））{
返回d.x；
})，d3.max（线数据，函数（d）{
返回d.x；
})]),
yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[d3.min（lineData，function（d））{
返回d.y；
})，d3.max（线数据，函数（d）{
返回d.y；
})]),
xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickSubdivide（真），
yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回x范围（d.x）；
})
.y（功能（d）{
返回y范围（d.y）；
})
.插入（“线性”）；
vis.append（“svg:path”）
.attr（“d”，lineFunc（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
如果您只想手动完成此操作（对于许多SVG来说不是以编程方式），您可以在SVG显示的页面上，右键单击它，在Firefox中选择“Inspect Element”（在Chrome中选择“Inspect”），然后在“Inspector”选项卡上（在Chrome中选择“Elements”），右键单击该元素，然后选择复制外部HTML的选项。然后可以将复制的文本粘贴到文本编辑器中，并将其另存为.svg文件。我用你的例子试过了，它在Illustrator中打开，蓝色的线条显示线条数据。如果你只是想手工操作（对于许多SVG来说不是以编程方式），你可以在SVG显示的页面上，右击它，在Firefox中选择“Inspect Element”（在Chrome中选择“Inspect”），然后在“Inspector”选项卡上选择（“Elements”在Chrome中，右键单击元素，然后选择复制外部HTML的选项。然后可以将复制的文本粘贴到文本编辑器中，并将其另存为.svg文件。我用你的例子试过了，它在Illustrator中打开，蓝色的线条显示线条数据。如果你想用svg代码创建pdf文件，
将代码导入，然后以.pdf格式导出。然后您将有一个独立的pdf文件可供使用。如果您想用svg代码创建pdf文件，
将代码导入，然后以.pdf格式导出。然后，您将有一个独立的pdf文件可供使用。您可以使用我创建的开放源代码库，将D3.js创建的SVG与外部样式表和导入的符号一起保存。您可以使用我创建的开放源代码库，将D3.js创建的SVG与外部样式表和导入的符号一起保存。您不能这样做由于安全原因，请从浏览器中删除。你必须让用户选择一个目录，正如Max所说，我建议你手工操作，而不是编程，因为这很复杂，而且涉及服务器端代码。请参阅本教程：由于安全原因，您无法在浏览器中执行此操作。你必须让用户选择一个目录，正如Max所说，我建议你手工操作，而不是编程，因为这很复杂，而且涉及服务器端代码。请参阅本教程：您将如何进行编程？好问题：：-）希望其他人能回答。同时，这些问题或许能给我们一些启示？您将如何进行编程？好问题：-）希望其他人能回答。同时，这些问题或许能给我们一些启示？和