How to save d3 drawing in png files?

Question

I'm drawing dynamic charts with d3 with some elements fading out on mouse over. How could I save the chart to a png file as it appears on the mouse over. For instance, mouse over hides an element, and "on click" save the chart hiding the same element as mouse over.

Starting from this code I added an on click function that generate the canvas hence png image using the canvg.js library.

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

Since the on click function in called after the mouse over one on the same elements, I was expecting that the generated image corresponds to the one with hidden elements. However, I get the full chord graph with no hidden elements.

Adding the code that hides (fade out) elements on mouse over doesn't make any difference: mouse over hides elements, but they still appear in the generated PNG image.

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

Below is the working code.

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