Как сохранить чертеж d3 в png-файлах?

Question

Я рисую динамические диаграммы с d3, некоторые элементы исчезают на мыши. Как я могу сохранить диаграмму в png-файле, как она появляется на мыши. Например, мышь, скрывающая элемент, и «по щелчку» сохраняет диаграмму, скрывающую тот же элемент, что и мышь.

Начиная с this code Я добавил функцию щелчка, которая генерирует изображение canvas из png с помощью библиотеки canvg.js.

function mouseclick(d, i) { 

    var content = document.getElementById('#svg-container').innerHTML; 
    var canvas = document.getElementById('#svg-canvas'); 

    canvg(canvas, content); 

    var theImage = canvas.toDataURL('image/png'); 
    document.getElementById('#svg-img').setAttribute('src', theImage); 
} 

Поскольку функция по щелчку в вызываются после мыши по одному на один и те же элементы, я ожидал, что сформированный образ соответствует одному со скрытыми элементами. Тем не менее, я получаю полный график аккордов без скрытых элементов.

Добавление кода, скрывающего элементы на мыши, не имеет никакого значения: мышь накрывает элементы, но они все еще появляются в сгенерированном изображении PNG.

function mouseover(d, i) { 
    d3.select("#tooltip") 
     .style("visibility", "visible") 
     .html("tooltip") 
     .style("top", function() { return (d3.event.pageY - 80)+"px"}) 
     .style("left", function() { return (d3.event.pageX - 130)+"px";}) 
    chordPaths.classed("fade", function(p) { 
     return p.source.index != i && p.target.index != i; 
    }); 
} 

function mouseclick(d, i) { 

    chordPaths.classed("fade", function(p) { 
     return p.source.index != i && p.target.index != i; 
    }); 
    var content = document.getElementById('svg-container').innerHTML; 
    var canvas = document.getElementById('svg-canvas'); 

    canvg(canvas, content); 

    var theImage = canvas.toDataURL('image/png'); 
    document.getElementById('svg-img').setAttribute('src', theImage); 
} 

Answer 1

Ниже приведен рабочий код.

// From http://mkweb.bcgsc.ca/circos/guide/tables/ 
var chord = d3.layout.chord() 
.padding(.05) 
.sortSubgroups(d3.descending) 
.matrix([ 
[11975, 5871, 8916, 2868], 
[ 1951, 10048, 2060, 6171], 
[ 8010, 16145, 8090, 8045], 
[ 1013, 990, 940, 6907] 
]); 

var w = 600, 
h = 600, 
r0 = Math.min(w, h) * .41, 
r1 = r0 * 1.1; 

var fill = d3.scale.ordinal() 
.domain(d3.range(4)) 
.range(["#000000", "#FFDD89", "#957244", "#F26223"]); 

var svg = d3.select("#chart") 
.append("svg:svg") 
.attr("width", w) 
.attr("height", h) 
.append("svg:g") 
.attr("transform", "translate(" + w/2 + "," + h/2 + ")"); 

svg.append("svg:g") 
.selectAll("path") 
.data(chord.groups) 
.enter().append("svg:path") 
.style("fill", function(d) { return fill(d.index); }) 
.style("stroke", function(d) { return fill(d.index); }) 
.attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1)) 
.on("mouseover", fade(.1)) 
.on("mouseout", fade(1)) 
.on("click", mouseclick); 

var ticks = svg.append("svg:g") 
.selectAll("g") 
.data(chord.groups) 
.enter().append("svg:g") 
.selectAll("g") 
.data(groupTicks) 
.enter().append("svg:g") 
.attr("transform", function(d) { 
    return "rotate(" + (d.angle * 180/Math.PI - 90) + ")" 
     + "translate(" + r1 + ",0)"; 
}); 

ticks.append("svg:line") 
.attr("x1", 1) 
.attr("y1", 0) 
.attr("x2", 5) 
.attr("y2", 0) 
.style("stroke", "#000"); 

ticks.append("svg:text") 
.attr("x", 8) 
.attr("dy", ".35em") 
.attr("text-anchor", function(d) { 
    return d.angle > Math.PI ? "end" : null; 
}) 
.attr("transform", function(d) { 
    return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; 
}) 
.text(function(d) { return d.label; }); 

svg.append("svg:g") 
.attr("class", "chord") 
.selectAll("path") 
.data(chord.chords) 
.enter().append("svg:path") 
.style("fill", function(d) { return fill(d.target.index); }) 
.attr("d", d3.svg.chord().radius(r0)) 
.style("opacity", 1); 

function groupTicks(d) { 
var k = (d.endAngle - d.startAngle)/d.value; 
return d3.range(0, d.value, 1000).map(function(v, i) { 
    return { 
     angle: v * k + d.startAngle, 
     label: i % 5 ? null : v/1000 + "k" 
    }; 
    }); 
} 

/** Returns an event handler for fading a given chord group. */ 
function fade(opacity) { 
    return function(g, i) { 
    svg.selectAll("g.chord path") 
    .filter(function(d) { 
     return d.source.index != i && d.target.index != i; 
    }) 
    .transition() 
    .style("opacity", opacity); 
    } 
} 

function mouseclick(d, i) { 

var content = document.getElementById('chart').innerHTML; 
var canvas = document.getElementById('svg-canvas'); 

canvg(canvas, content); 

var theImage = canvas.toDataURL('image/png'); 
document.getElementById('svg-img').setAttribute('src', theImage); 
}