SVG到d3.js的画布 [英] SVG to Canvas with d3.js

问题描述

有没有人尝试在创建d3.js可视化时使用svg到canvas库？我试图使用canvg.js和d3.js从Android 2.3应用程序webview中转换svg到画布，但是当我调用：

  svg.selectAll（。axis）
 .data（d3.range（angle.domain（）[1]））
 .enter 
 .attr（class，axis）
 .attr（transform，function（d）{returnrotate（+ angle（d）* 180 / Math.PI + ;}）
 .call（d3.svg.axis（）
 .scale（radius.copy（）。range（[ -  5，-outerRadius]））
 .ticks ）
 .orient（left））
 .append（text）
 .attr（y，
 function（d）{
 if window.innerWidth <455）{
 console.log（innerWidth less than 455：，window.innerWidth）; 
 return  - （window.innerHeight * .33）; 
} 
 else {
 console.log（innerWidth greater than 455：，window.innerWidth）; 
 return  - （window.innerHeight * .33）; 
} 
 }）
 .attr（dy，.71em）
 .attr（text-anchor，middle）
 .text capitalMeta [i]; }）
 .attr（style，font-size：12px;）; 
  

我收到错误：Uncaught TypeError：无法调用方法'setProperty'null http://mbostock.github.com/d3/d3.js?2.5.0:1707

会是某种无头的浏览器应用程序，还是服务器端的js解析器工作？有没有人遇到过这个？

解决方案

这里有一种方法可以将svg写入画布或任何）：

  //创建导出按钮
 d3.select（body）
 .append（button）
 .html（Export）
 .on（click，svgToCanvas）; 
 
 var w = 100，//或任何你的svg宽度是
 h = 100; 
 
 //创建导出函数 - 这将导出
 //它找到的第一个svg元素
 function svgToCanvas（）{
 //选择第一个svg元素
 var svg = d3.select（svg）[0] [0]，
 img = new Image（），
 serializer = new XMLSerializer（），
 svgStr = serializer.serializeToString（svg）; 
 
 img.src ='data：image / svg + xml; base64，'+ window.btoa（svgStr）; 
 
 //你也可以使用没有base64编码的实际字符串：
 //img.src =data：image / svg + xml; utf8，+ svgStr; 
 
 var canvas = document.createElement（canvas）; 
 document.body.appendChild（canvas）; 
 
 canvas.width = w; 
 canvas.height = h; 
 canvas.getContext（2d）。drawImage（img，0,0，w，h）; 
 //现在保存为png或任何
}; 
  

Has anyone tried using a svg to canvas library when creating d3.js visualizations? I've tried to use canvg.js and d3.js to convert svg to canvas from within an android 2.3 application webview, but when I call:

  svg.selectAll(".axis")
      .data(d3.range(angle.domain()[1]))
    .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
    .call(d3.svg.axis()
      .scale(radius.copy().range([-5, -outerRadius]))
      .ticks(5)
      .orient("left"))
    .append("text")
      .attr("y", 
        function (d) {
          if (window.innerWidth < 455){
            console.log("innerWidth less than 455: ",window.innerWidth);
            return -(window.innerHeight * .33);
          }
          else{
            console.log("innerWidth greater than 455: ",window.innerWidth);
            return -(window.innerHeight * .33);
          }
        })
      .attr("dy", ".71em")
      .attr("text-anchor", "middle")
      .text(function(d, i) { return capitalMeta[i]; })
      .attr("style","font-size:12px;");

I get the error: Uncaught TypeError: Cannot call method 'setProperty' of null http://mbostock.github.com/d3/d3.js?2.5.0:1707

Would some sort of headless browser application, or a server side js parser work? Has anyone encountered this before?

解决方案

Here's one way you could write your svg to canvas (and then save the result as a png or whatever):

// Create an export button
d3.select("body")
    .append("button")
    .html("Export")
    .on("click",svgToCanvas);

var w = 100, // or whatever your svg width is
    h = 100;

// Create the export function - this will just export 
// the first svg element it finds
function svgToCanvas(){
    // Select the first svg element
    var svg = d3.select("svg")[0][0],
        img = new Image(),
        serializer = new XMLSerializer(),
        svgStr = serializer.serializeToString(svg);

    img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);

    // You could also use the actual string without base64 encoding it:
    //img.src = "data:image/svg+xml;utf8," + svgStr;

    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);

    canvas.width = w;
    canvas.height = h;
    canvas.getContext("2d").drawImage(img,0,0,w,h);
    // Now save as png or whatever
};

这篇关于SVG到d3.js的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！