Javascript 如何将D3图形保存为django网站中的图像？
我是Django和D3的新手。我已经创建了一个Django网站，可以创建多个动态d3图形。我想添加一个功能，用户可以将图形保存为图像，以便他们可以将其用于报告目的 我使用以下链接作为 也可以找到我的代码作为参考Javascript 如何将D3图形保存为django网站中的图像？,javascript,html,django,d3.js,svg,Javascript,Html,Django,D3.js,Svg,我是Django和D3的新手。我已经创建了一个Django网站，可以创建多个动态d3图形。我想添加一个功能，用户可以将图形保存为图像，以便他们可以将其用于报告目的 我使用以下链接作为 也可以找到我的代码作为参考 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: A starting point for interactivi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: A starting point for interactivity</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
<style type="text/css">
.graph1 {
float : left ;
height : 400px;
width : 600px;
font: 20px sans-serif;
text-align: left;
margin-left : 20px;
border : 1px solid black;
}
.graph2 {
float : right ;
margin-right : 20px ;
width : 600px;
height : 400px;
border : 1px solid black;
overflow: scroll;
border : 1px solid black;
}
.button1{
float :left ;
}
.button2{
float :right ;
}
</style>
</head>
<body>
<div id="area1" class="graph1"></div>
<div id="area2" class="graph2"></div>
<button id="save" class="button1">Save as Image</button>
<canvas id="canvas1" width="960" height="500" style="display:none"> </canvas>
<button id="save1" class="button2">Save as Image</button>
<canvas id="canvas2" width="960" height="500" style="display:none"></canvas>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 400;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg1 = d3.select("#area1")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg1.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg1.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
d3.select("#save").on("click", function(){
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
//d3.select("#svgdataurl").html(img);
var canvas = document.getElementById("canvas1"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
//d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample1.png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();
};
});
//pie chart
//Width and height
var w = 380;
var h = 380;
var dataset = [ 5, 10, 20, 45, 6, 25 ];
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create SVG element
var svg = d3.select("#area2")
.append("svg")
.attr("width", w)
.attr("height", h);
//Set up groups
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
//Draw arc paths
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
//Labels
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});
d3.select("#save1").on("click", function(){
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
//d3.select("#svgdataurl").html(img);
var canvas = document.getElementById("canvas2"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
//d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample2.png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();
};
});
</script>
</body>
D3：互动的起点
.graph1{
浮动：左；
高度：400px；
宽度：600px；
字体：20px无衬线；
文本对齐：左对齐；
左边距：20px；
边框：1px纯黑；
}
.图2{
浮动：对；
右边距：20px；
宽度：600px；
高度：400px；
边框：1px纯黑；
溢出：滚动；
边框：1px纯黑；
}
.按钮1{
浮动：左；
}
.按钮2{
浮动：对；
}
另存为图像
另存为图像
//宽度和高度
var w=600；
var h=400；
var数据集=[5,10,13,19,21,25,22,18,15,13，
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale=d3.scale.ordinal（）
.domain（d3.range（dataset.length））
.范围圆带（[0，w]，0.05）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据集）]）
.范围（[0，h]）；
//创建SVG元素
var svg1=d3。选择（“区域1”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//创建酒吧
svg1.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})
.attr（“y”，函数（d）{
返回h-yScale（d）；
})
.attr（“宽度”，xScale.rangeBand（））
.attr（“高度”，功能（d）{
返回yScale（d）；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d*10）+”）；
});
//创建标签
svg1.选择全部（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d；
})
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d，i）{
返回xScale（i）+xScale.rangeBand（）/2；
})
.attr（“y”，函数（d）{
返回h-yScale（d）+14；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“白色”）；
d3.选择（“保存”）。在（“单击”，函数（）上{
var html=d3.select（“svg”）
.attr（“版本”，1.1）
.attr（“xmlns”）http://www.w3.org/2000/svg")
.node（）.parentNode.innerHTML；
//log（html）；
var imgsrc='数据：image/svg+xml；base64'+btoa（html）；
var img=“”；
//d3.选择（“#svgdataul”）.html（img）；
var canvas=document.getElementById（“canvas1”），
context=canvas.getContext（“2d”）；
var图像=新图像；
image.src=imgsrc；
image.onload=函数（）{
drawImage（image，0,0）；
var canvasdata=canvas.toDataURL（“image/png”）；
var pngimg=''；
//d3.选择（“#pngdataul”）.html（pngimg）；
var a=document.createElement（“a”）；
a、 下载=“sample1.png”；
a、 href=拉票数据；
文件.正文.附件（a）；
a、 单击（）；
};
});
//饼图
//宽度和高度
var w=380；
var h=380；
var数据集=[5,10,20,45,6,25]；
外部无功功率=w/2；
var innerRadius=0；
var arc=d3.svg.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var pie=d3.layout.pie（）；
//通过10步序数刻度轻松获取颜色
var color=d3.scale.category10（）；
//创建SVG元素
var svg=d3。选择（“区域2”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//成立小组
var arcs=svg.selectAll（“g.arc”）
.数据（饼图（数据集））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
.attr（“转换”、“转换”（“+outerRadius+”，“+outerRadius+”））；
//绘制弧路径
arcs.append（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）；
//标签
arcs.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+弧形心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d值；
});
d3.选择（“#save1”）。在（“单击”，函数（）{
var html=d3.select（“svg”）
.attr（“版本”，1.1）
.attr（“xmlns”）http://www.w3.org/2000/svg")
.node（）.parentNode.innerHTML；
//log（html）；
var imgsrc='数据：image/svg+xml；base64'+btoa（html）；
var img=“”；
//d3.选择（“#svgdataul”）.html（img）；
var canvas=document.getElementById（“canvas2”），
context=canvas.getContext（“2d”）；
var图像=新图像；
image.src=imgsrc；
image.onload=函数（）{
drawImage（image，0,0）；
var canvasdata=canvas.toDataURL（“image/png”）；
var pngimg=''；
//d3.选择（“#pngdataul”）.html（pngimg）；
var a=document.createElement（“a”）；
a、 下载=“sample2.png”；
a、 href=拉票数据；
文件.正文.附件（a）；
a、 单击（）；
};
});
d3中的。选择（“保存1”）。在（“单击” var html = d3.select("svg")
...
var html = d3.select("#area2>svg")
...