fixes legends in PNG/PDF downloads (#262)

datausa/assets/js/helpers/save.js

@@ -44,9 +44,6 @@ var save = function(svg, options) {
 
       imageTiles[url] = {"loaded": false};
 
-      // console.log(d3.select(this).attr("x"), x);
-      // console.log(d3.select(this).attr("y"), y);
-
       var img = new Image();
       img.crossOrigin = 'Anonymous';
       img.onload = function(){
@@ -69,6 +66,37 @@ var save = function(svg, options) {
     });
   }
 
+  var legendIcons = svg.selectAll("#key rect");
+
+  if (legendIcons.size()) {
+    var keyBox = d3.select("#key").node().getBBox();
+
+    var translate = d3.select("#key").attr("transform").match(/translate\(([^a-z]+)\)/i)[1];
+    translate = translate.replace(/([^a-z])\s([^a-z])/gi, "$1,$2").split(",").map(Number);
+    keyBox.y += translate[1];
+
+    legendIcons.each(function(d, i){
+      var pattern = d3.select(this).attr("fill").split("#")[1];
+      pattern = svg.select("#" + pattern.substring(0, pattern.length-1));
+      var size = parseFloat(pattern.select("image").attr("width"));
+
+      var x = keyBox.x + (i * (size + 5)), y = keyBox.y;
+      console.log(x, y);
+
+      var rect = pattern.select("rect").node();
+      rect = d3plus.client.ie ? (new XMLSerializer()).serializeToString(rect) : rect.outerHTML;
+      context.drawSvg(rect, x, y);
+
+      var img = document.createElement('img');
+      img.src = pattern.select("image").attr("href");
+
+      context.save();
+      context.translate(x, y);
+      context.drawImage(img, 0, 0, size, size);
+      context.restore();
+    });
+  }
+
   // Wait for all the tiles to download
   checkStatus();
 
@@ -101,7 +129,7 @@ var save = function(svg, options) {
 
     // // draw svg path
     svg.selectAll("svg > *").each(function(){
-      if (!d3.select(this).classed("tiles")) {
+      if (!d3.select(this).classed("tiles") && d3.select(this).attr("id") !== "key") {
         var outer = d3plus.client.ie ? (new XMLSerializer()).serializeToString(this) : this.outerHTML;
         context.drawSvg(outer);
       }

datausa/static/js/d3plus.js

@@ -18280,7 +18280,7 @@ d3plus = {};
  * @static
  */
 
-d3plus.version = "1.9.2 - Cornflower";
+d3plus.version = "1.9.3 - Cornflower";
 
 
 /**
@@ -27063,6 +27063,7 @@ module.exports = function(vars) {
 
                 pattern_enter.append("rect")
                   .attr("fill",color)
+                  .attr("stroke", "none")
                   .attr("width",square_size)
                   .attr("height",square_size);
 
@@ -28276,7 +28277,7 @@ module.exports = function(vars) {
       textWrap()
         .align(align)
         .container(container)
-        .height(vars.height.value / 8)
+        .height(vars.height.value / 2)
         .size(false)
         .text(d.value)
         .width(titleWidth)
@@ -32968,7 +32969,7 @@ line = function(vars) {
     for (j = 0, len1 = ref.length; j < len1; j++) {
       d = ref[j];
       xval = fetchValue(vars, d, vars.x.value);
-      if (xval) {
+      if (xval !== null) {
         d.d3plus.x2 = false;
         d.d3plus.x = vars.x.scale.viz(xval);
       } else {
@@ -32977,7 +32978,7 @@ line = function(vars) {
       }
       d.d3plus.x += vars.axes.margin.left;
       yval = fetchValue(vars, d, vars.y.value);
-      if (yval) {
+      if (yval !== null) {
         d.d3plus.y2 = false;
         d.d3plus.y = vars.y.scale.viz(yval);
       } else {