在创建d3.js可视化时,有没有人试过使用svg到canvas库？我试图使用canvg.js和d3.js从一个
android 2.3应用程序webview中将svg转换为canvas,但是当我调用：
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;");
我收到错误：未捕获TypeError：无法调用null http://mbostock.github.com/d3/d3.js?2.5.0:1707的方法’setProperty’
会有某种无头浏览器应用程序,还是服务器端的js解析器工作？以前有人遇到过吗？
解决方法
这里有一种方式可以将svg写入画布(然后将结果保存为png或其他内容)：
// 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,w,h);
// Now save as png or whatever
};
