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))
  });
});

希望这会对你有所帮助。

d3.js radial treed下载不同于svg

1 个答案: