Question

我正在尝试将d3图表另存为png。这是我正在使用的参考。 http://techslides.com/demos/d3/svg-to-image-3.html

这是我的html页面http://54.186.224.191/Animation/png.html

以下是此页面的代码

<!DOCTYPE html>
<meta charset="utf-8">
<link href="nvd3master/nv.d3.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="nvd3master/lib/d3.v3.js"></script>
<script src="nvd3master/nv.d3.js"></script>
<script src="nvd3master/src/tooltip.js"></script>
<script src="nvd3master/src/utils.js"></script>
<script src="nvd3master/src/models/legend.js"></script>
<script src="nvd3master/src/models/axis.js"></script>
<script src="nvd3master/src/models/scatter.js"></script>
<script src="nvd3master/src/models/line.js"></script>
<script src="nvd3master/src/models/lineWithFocusChart.js"></script>
<script src="nvd3master/stream_layers.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
   path {
   stroke: #000;
   fill-opacity: .70;
   }
   body {
   overflow-y:scroll;
   }
   text {
   font: 12px sans-serif;
   }
   svg {
   display: block;
   }
   #chart svg {
   height: 400px;
   min-width: 100px;
   min-height: 100px;
   }
</style>
<body>
   <div id="svg"></div>
   <button id="save">Save as Image</button>
   <canvas width="960" height="700" style="display:none"></canvas>
   <div id="chart" class='with-3d-shadow with-transitions'   >
      <svg width="1000" height="800">
      </svg>
   </div>
   <script>
      $.ajax({
        dataType : "json",
        url : "getdata.php",
        success : function(data) {


       nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart()
      .x(function(d) { return d[0] })   //We can modify the data accessor functions...
                        .y(function(d) { return d[1] });   //...in case your data is formatted differently.



        chart.xAxis
             .tickFormat(function(d) { 
               return d3.time.format('%x')(new Date(d))
      });

        chart.x2Axis
              .tickFormat(function(d) { 
                return d3.time.format('%x')(new Date(d));
      });
        chart.yAxis
            .tickFormat(d3.format(',.1f'));
        chart.y2Axis
            .tickFormat(d3.format(',.1f'));

      d3.select('#chart svg')
            .datum(data)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
       });

        }
       });


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

        //console.log(html);
        var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
        var img = '<img src="'+imgsrc+'">'; 


        var canvas = document.querySelector("canvas"),
            context = canvas.getContext("2d");

        var image = new Image;
        image.src = imgsrc;
        image.onload = function() {
        context.drawImage(image, 0, 0);

          //save and serve it as an actual filename
          binaryblob();

          var a = document.createElement("a");
          a.download = "sample.png";
          a.href = canvas.toDataURL("image/png");


          a.click();
        };

      });


      function binaryblob(){
        var byteString = atob(document.querySelector("canvas").toDataURL().replace(/^data:image\/(png|jpg);base64,/, "")); 
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
          }

      }
   </script>

如您所见，按下按钮并渲染和下载图像时，图像不同。这是一个CSS问题吗？有谁知道解决这个问题的人？非常感谢您的帮助。

d3交互式图表保存至PNG问题

0 个答案: