d3.jsラジアルtreedダウンロードは異なり、私は放射状ツリーを作成し、SVGにそれをダウンロードしようとしているが、それはそれは、Webページ上に表示されていないものを黒の太いストロークでダウンロードするいくつかの問題</p> <p>を持っていた

Question

をSVGします。

黒い線はどこから来ているのですか？

var svg = d3.select("svg"), 
width = +svg.attr("width"), 
height = +svg.attr("height"), 
g = svg.append("g").attr("transform", "translate(" + (width/2 - 15) + "," 
+ (height/2 + 25) + ")"); 

var stratify = d3.stratify() 
.parentId(function(d) { 
console.log(d.id.substring(0, d.id.lastIndexOf("."))); 
return d.id.substring(0, d.id.lastIndexOf(".")); }); 

var tree = d3.cluster() 
tree.size([360, 360]) 
tree.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2)/
a.depth; }); 


d3.csv("flare.csv", function(error, data) { 
if (error) throw error; 

var root = tree(stratify(data) 
    .sort(function(a, b) { return (a.height - b.height + 100) || 
a.id.localeCompare(b.id); })); 

var link = g.selectAll(".link") 
.data(root.descendants().slice(1)) 
.enter().append("path") 
    .attr("class", "link") 
    .attr("d", function(d) { 
    return "M" + project(d.x, d.y) 
     + "C" + project(d.x, (d.y + d.parent.y)/2) 
     + " " + project(d.parent.x, (d.y + d.parent.y)/2) 
     + " " + project(d.parent.x, d.parent.y); 
    }); 

link.attr('stroke', function(d) { 
    if (d.id.startsWith("Mother.Biological")){ 
     return "#386eff"; 
    } 
    if (d.id.startsWith("Mother.Env")){ 
     return "#45cbf2"; 
    } 
    else return '#70f2ad'; 
    }); 
var node = g.selectAll(".node") 
.data(root.descendants()) 
.enter().append("g") 
    .attr("class", function(d) { return "node" + (d.children ? " node-- 
internal" : " node--leaf"); }) 
    .attr("transform", function(d) { return "translate(" + project(d.x, 
d.y) 
+ ")"; }); 

node.append("circle") 
    .attr("r", function(d) { 
    console.log(d.value); 
    if (d.id == "Mother") return 4.4; 
    else return 2.4; 
    }) 
    .style('fill', function(d) { 
    if (d.id.startsWith("Mother.Biological")){ 
     return "#386eff"; 
    } 
    if (d.id.startsWith("Mother.Env")){ 
     return "#45cbf2"; 
    } 
    if (d.id.startsWith("Mother.Biological")){ 
     return "#386eff"; 
    } 
    if (d.id.startsWith("Mother.Form")){ 
     return '#70f2ad'; 
    } 
    d.color = 'red'; 

    return d.color}); 

    node.append("text") 
    .attr("dy", ".31em") 
    .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; }) 
    .style("text-anchor", function(d) { return d.x < 180 === !d.children ? 
"start" : "end"; }) 
    .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 
: d.x + 90) + ")"; }) 
    .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }); 
}); 

function project(x, y) { 
    var angle = (x - 90)/180 * Math.PI, radius = y; 
    return [radius * Math.cos(angle), radius * Math.sin(angle)]; 
} 

d3.select("#download") 
.on("mouseover", writeDownloadLink); 

function writeDownloadLink(){ 
var html = d3.select("svg") 
    .attr("title", "svg_title") 
    .attr("version", 1.1) 
    .attr("xmlns", "http://www.w3.org/2000/svg") 
    .node().parentNode.innerHTML; 

d3.select(this) 
    .attr("href-lang", "image/svg+xml") 
    .attr("href", "data:image/svg+xml;base64,\n" + btoa(html)) 
    .on("mousedown", function(){ 
     if(event.button != 2){ 
      d3.select(this) 
       .attr("href", null) 
       .html("Use right click"); 
     } 
    }) 
    .on("mouseout", function(){ 
     d3.select(this) 
      .html("Download"); 
    }); 

};

ブラウザでうまく見えますが、ダウンロードしてSVGまたはEFMに変換すると、その行が戻ってきます。

Answer 1

提供したページには、スタイルタグが含まれています。私はどのように正確にSVGをエクスポートするのかよく分かりませんが、いくつかのCSSルールは道に沿ってを失っているようです。

は似たようなケースでは、私は、現在のCSSプロパティを取得し、スタイルプロパティにそれらを置くことをどうにか：

d3.selectAll('...').each(function() { 
    var that = d3.select(this); 
    ['stroke', 'stroke-width', 'opacity', 'fill', ...].forEach(function(property) { 
    that.style(property, that.style(property)) 
    }); 
}); 

が、これはあなたを助けることを願っています。