Javascript 下载d3分层边缘捆绑可视化为PNG时显示的黑色填充链接
我已经创建了一个D3层次边缘捆绑可视化。当我下载这个可视化为PNG时，下载图像中的链接填充了黑色，而实际可视化中没有显示。 下载的图像是 显示的实际可视化是 如何在下载的图像中获得相同的可视化效果。 我目前的代码是：Javascript 下载d3分层边缘捆绑可视化为PNG时显示的黑色填充链接,javascript,d3.js,png,Javascript,D3.js,Png,我已经创建了一个D3层次边缘捆绑可视化。当我下载这个可视化为PNG时，下载图像中的链接填充了黑色，而实际可视化中没有显示。 下载的图像是 显示的实际可视化是 如何在下载的图像中获得相同的可视化效果。 我目前的代码是： <html> <head> <style> .node { font: 11px "Helvetica Neue", Helvetica, Arial, sans-s
<html>
<head>
<style>
.node {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
stroke: steelblue;
stroke-opacity: .4;
fill: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var classes=[
{"name":"a","size":3938,"imports":["b","f"]},
{"name":"b","size":3938,"imports":[]},
{"name":"c","size":3938,"imports":["a"]},
{"name":"d","size":3938,"imports":[]},
{"name":"e","size":3938,"imports":[]},
{"name":"f","size":3938,"imports":[]}
];
var diameter = 700,
radius = diameter / 2,
innerRadius = radius - 120;
var cluster = d3.layout.cluster()
.size([360, innerRadius]);
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var svg = d3.select("body").append("svg")
.attr("id","networkSvg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var nodes = cluster.nodes(packageHierarchy(classes)),
links = packageImports(nodes);
svg.selectAll(".link")
.data(bundle(links))
.enter().append("path")
.attr("class", "link")
.attr("d", line);
svg.selectAll(".node")
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on("mouseover", function(d){
d3.selectAll(".node").style("fill", "black");
d3.selectAll(".link").style("stroke", "steelblue");
colorSource(d.name);
d.imports.forEach(function(name){
colorTarget(name);
colorOutgoingLink(d.name, name);
});
d.parent.children.forEach(function(data){
if(data.imports.indexOf(d.name)>-1)
{
colorTarget(data.name);
colorIncomingLink(data.name, d.name);
}
});
})
.on("mouseout",function(d)
{
d3.selectAll(".node").style("fill", "black");
d3.selectAll(".link").style("stroke", "steelblue");
})
.append("text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
.text(function(d) { return d.key; });
// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
var map = {};
function find(name, data) {
var node = map[name], i;
if (!node) {
node = map[name] = data || {name: name, children: []};
if (name.length) {
node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
node.parent.children.push(node);
node.key = name.substring(i + 1);
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return map[""];
}
// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
var map = {},
imports = [];
// Compute a map from name to node.
nodes.forEach(function(d) {
map[d.name] = d;
});
// For each import, construct a link from the source to target node.
nodes.forEach(function(d) {
if (d.imports) d.imports.forEach(function(i) {
imports.push({source: map[d.name], target: map[i]});
});
});
return imports;
}
function colorIncomingLink(src,tgt){
var link = d3.selectAll(".link")[0].filter(function(d){
return (d3.select(d).data()[0][0].name == src && d3.select(d).data()[0][2].name == tgt);
});
d3.selectAll(link).style("stroke", "green");
}
function colorOutgoingLink(src,tgt){
var link = d3.selectAll(".link")[0].filter(function(d){
return (d3.select(d).data()[0][0].name == src && d3.select(d).data()[0][2].name == tgt);
});
d3.selectAll(link).style("stroke", "red");
}
function colorTarget(name){
//iterate through all teh dom and get the DOM which has the data
var node = d3.selectAll(".node")[0].filter(function(d){
return d3.select(d).data()[0].name == name;
});
d3.selectAll(node).style("fill", "red");
}
function colorSource(name){
//iterate through all teh dom and get teh DOM which has the data
var node = d3.selectAll(".node")[0].filter(function(d){
return d3.select(d).data()[0].name == name;
});
d3.selectAll(node).style("fill", "green");
}
function download()
{
img = new Image(),
serializer = new XMLSerializer(),
svgStr = serializer.serializeToString(document.getElementById('networkSvg'));
img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
// You could also use the actual string without base64 encoding it:
//img.src = "data:image/svg+xml;utf8," + svgStr;
var canvas = document.createElement("canvas");
var w=2000;
var h=2000;
canvas.width = w;
canvas.height = h;
canvas.getContext("2d").drawImage(img,0,0,w,h);
var imgURL = canvas.toDataURL("image/png");
var dlLink = document.createElement('a');
dlLink.download = "down";
dlLink.href = imgURL;
dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
</script>
<button onclick="download()">Download</button>
</body>
</html>
.节点{
字体：11px“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.链接{
笔画：钢蓝；
笔画不透明度：.4；
填充：无；
}
变量类=[
{“名称”：“a”，“尺寸”：3938，“进口”：[“b”，“f”]}，
{“名称”：“b”，“大小”：3938，“导入”：[]}，
{“name”：“c”，“size”：3938，“imports”：[“a”]}，
{“名称”：“d”，“大小”：3938，“导入”：[]}，
{“名称”：“e”，“大小”：3938，“导入”：[]}，
{“名称”：“f”，“大小”：3938，“导入”：[]}
];
var直径=700，
半径=直径/2，
内半径=半径-120；
var cluster=d3.layout.cluster（）
.尺寸（[360，内半径]）；
var bundle=d3.layout.bundle（）；
var line=d3.svg.line.radial（）
.插入（“束”）
.张力（.85）
.radius（函数（d）{返回d.y；}）
.angle（函数（d）{返回d.x/180*Math.PI；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“id”、“网络SVG”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
var nodes=cluster.nodes（packageHierarchy（classes）），
链接=packageImports（节点）；
svg.selectAll（“.link”）
.数据（捆绑（链接））
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，行）；
svg.selectAll（“.node”）
.data（nodes.filter（函数（n）{return！n.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{return”旋转（“+（d.x-90）+”）平移（“+d.y+”）；}）
.on（“鼠标悬停”，功能（d）{
d3.选择全部（“.node”）。样式（“填充”、“黑色”）；
d3.选择全部（“.link”）.样式（“笔划”、“钢蓝”）；
色源（d.name）；
d、 imports.forEach（函数（名称）{
彩色靶标（名称）；
着色链接（d.名称、名称）；
});
d、 parent.children.forEach（函数（数据）{
if（data.imports.indexOf（d.name）>-1）
{
colorTarget（data.name）；
colorIncomingLink（data.name，d.name）；
}
});
})
.开启（“鼠标出”，功能（d）
{
d3.选择全部（“.node”）。样式（“填充”、“黑色”）；
d3.选择全部（“.link”）.样式（“笔划”、“钢蓝”）；
})
.append（“文本”）
.attr（“dx”，函数（d）{返回d.x<180？8:-8；}）
.attr（“dy”，“.31em”）
.attr（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.attr（“transform”，函数（d）{返回d.x<180？null:“rotate（180）”；}）
.text（函数（d）{return d.key；}）；
//从类名惰性地构造包层次结构。
函数包层次结构（类）{
var-map={}；
函数查找（名称、数据）{
var node=map[name]，i；
如果（！节点）{
node=map[name]=data | |{name:name，子项：[]}；
如果（名称、长度）{
node.parent=find（name.substring（0，i=name.lastIndexOf（“.”））；
node.parent.children.push（节点）；
node.key=name.substring（i+1）；
}
}
返回节点；
}
类。forEach（函数（d）{
查找（d.name，d）；
});
返回映射[“”]；
}
//返回给定节点数组的导入列表。
函数包导入（节点）{
var-map={}，
进口=[]；
//计算从名称到节点的映射。
nodes.forEach（函数（d）{
map[d.name]=d；
});
//对于每个导入，构造从源节点到目标节点的链接。
nodes.forEach（函数（d）{
if（d.imports）d.imports.forEach（函数（i）{
push（{source:map[d.name]，target:map[i]}）；
});
});
退货进口；
}
函数colorIncomingLink（src、tgt）{
var-link=d3.sel