एसवीजी d3.js

Question

किसी को भी जब d3.js दृश्यावलोकन बनाने कैनवास पुस्तकालय के लिए एक svg उपयोग करने की कोशिश की है के साथ कैनवास पर? मैं canvg.js और d3.js उपयोग करने के लिए एंड्रॉयड 2.3 आवेदन वेबव्यू के भीतर से कैनवास को svg कन्वर्ट करने के लिए कोशिश की है, लेकिन जब मैं फोन:

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

मैं त्रुटि मिलती है: Uncaught TypeError: विधि कॉल नहीं कर सकता ' अशक्त http://mbostock.github.com/d3/d3.js?2.5.0:1707

की setProperty 'चाहेंगे बिना सिर ब्राउज़र अनुप्रयोग, या एक सर्वर साइड js पार्सर काम में किसी प्रकार का? क्या किसी ने इससे पहले सामना किया है?

Answer 1

आप एक ब्राउज़र का समर्थन करता है, तो यह वेबव्यू साथ एक समस्या है एसवीजी देखने के लिए पर एक ही कोड की कोशिश की है? फिर डीओएम क्रमबद्धता का उपयोग कर कैनव या this one का उपयोग करके this example आज़माएं। सर्वर-साइड रेंडरिंग के लिए, आप this example से शुरू कर सकते हैं कि इसे कैनवास सर्वर-साइड में Node.js. का उपयोग करके कैसे प्रस्तुत किया जाए।

Answer 2

मैंने लाइब्रेरी की कोशिश नहीं की है, लेकिन एमडीएन पर this पोस्ट के बाद एक कैनवास में डी 3 उत्पादित एसवीजी प्रदान किया है।

यह कोड एमडीएन और कुछ jQuery का एक त्वरित मिश-मैश है, जिसे आपको साफ करने की आवश्यकता होगी, और इसमें कोई त्रुटि नहीं है- या प्लैटफ्रॉम-चेकिंग, लेकिन यह काम करता है, और मुझे आशा है कि इससे मदद मिलती है ।

$(document.body).append(
    '<canvas id="canvas" width="'+diameter+'" height="'+diameter+'"></canvas>' 
); 

// https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas 
var el = $($('svg')[0]); 
var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg"' 
+ ' class="' + el.attr('class') +'"' 
+ ' width="' + el.attr('width') +'"' 
+ ' height="' + el.attr('height') +'"' 
+ '>' 
+ $('svg')[0].innerHTML.toString()+'</svg>'; 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var DOMURL = this.URL || this.webkitURL || this; 
var img = new Image(); 
var svg = new Blob([svgMarkup], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    alert('ok'); 
    DOMURL.revokeObjectURL(url); 
}; 
img.src = url; 

Answer 3

यहाँ एक तरीका है आप कैनवास करने के लिए अपने 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,0,0,w,h); 
    // Now save as png or whatever 
}; 

Answer 4

@ace द्वारा जवाब बहुत अच्छा है, लेकिन यह नहीं करता है ' बाहरी सीएसएस स्टाइलशीट के मामले को संभाल नहीं। नीचे मेरा उदाहरण स्वचालित रूप से जेनरेट की गई छवि को स्टाइल करेगा, मूल एसवीजी कैसा दिखता है, भले ही यह शैलियों को अलग स्टाइलशीट बनाता है।

// when called, will open a new tab with the SVG 
// which can then be right-clicked and 'save as...' 
function saveSVG(){ 

    // get styles from all required stylesheets 
    // http://www.coffeegnome.net/converting-svg-to-png-with-canvg/ 
    var style = "\n"; 
    var requiredSheets = ['phylogram_d3.css', 'open_sans.css']; // list of required CSS 
    for (var i=0; i<document.styleSheets.length; i++) { 
     var sheet = document.styleSheets[i]; 
     if (sheet.href) { 
      var sheetName = sheet.href.split('/').pop(); 
      if (requiredSheets.indexOf(sheetName) != -1) { 
       var rules = sheet.rules; 
       if (rules) { 
        for (var j=0; j<rules.length; j++) { 
         style += (rules[j].cssText + '\n'); 
        } 
       } 
      } 
     } 
    } 

    var svg = d3.select("svg"), 
     img = new Image(), 
     serializer = new XMLSerializer(), 

    // prepend style to svg 
    svg.insert('defs',":first-child") 
    d3.select("svg defs") 
     .append('style') 
     .attr('type','text/css') 
     .html(style); 


    // generate IMG in new tab 
    var svgStr = serializer.serializeToString(svg.node()); 
    img.src = 'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svgStr))); 
    window.open().document.write('<img src="' + img.src + '"/>'); 
}; 

और, पूरा करने के लिए, बटन फ़ंक्शन को कॉल:

// save button 
d3.select('body') 
    .append("button") 
    .on("click",saveSVG) 
    .attr('class', 'btn btn-success')