67496

How to make d3.js generate an svg without drawing it?

Question:

Is there a way to just generate an svg and get it as a string without actually drawing it? I thought about render svg to a hidden div and then reading the inner html, but is there a cleaner way?

Answer1:

I would think you could do this:

var svg = d3.select("body").append("svg") svg = d3.select(svg).remove()

Append the svg to the body, but immediately remove it. This will, of course, give you the 'd3 selection' object, not a string.

Answer2:

You can create a whole other DOM tree in javascript using <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment" rel="nofollow">createDocumentFragment()</a>. This is commonly used to create a complex section of the document and then add it all to the page in one step, so the browser only has to re-calculate layout once.

I haven't tested it, but you should also be able to use .innerHTML() to extract everything you've created as a string that can be saved to file. Answers to <a href="https://stackoverflow.com/questions/1750815/get-the-string-representation-of-a-dom-node" rel="nofollow">this SO Question</a> suggest that you can't call innerHTML() directly on the document fragment itself, so you would have to add a body element to the fragment, add your SVG to it, and then get the inner HTML from the body node.

Answer3:

One way to approach this problem is by checking how it would be done on the server side -- where there is no DOM.

As it turns out, the <a href="https://bl.ocks.org/tomgp/c99a699587b5c5465228" rel="nofollow">way to do this on the server side</a> involves more or less the same "hack" used in the question. This is because d3 expects to work on a DOM; writing that DOM to HTML is really the only way to render it to a string.

Brief example:

var svg = window.d3.select('body') .append('div').attr('class','container') .append('svg'); // and lots of other stuff //etc etc svg.selectAll('.arc').doSomething('blah blah'); var svgAsString = d3.select('.container').html();

Recommend

  • Prolog: Multiplying 2 lists with 1 of them not instantiated?
  • Sum, Avg, Max, Min, Count of NULL values
  • How to fix the Google Map API when print the whole page?
  • How do you use an fbx file in OpenGL on iOS?
  • What is an Artifact?
  • when does setTimeout start executing in a inline
  • Oracle - Second level subquery cannot see field from main query
  • Changing references to deprecated methods C++
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • Select value from xtype selection type checkbox CQ5
  • Configure nginx to return different files to different authenticated users with the same URI
  • Flash radiobutton: how do I get the selected radiobutton?
  • How can I restyle a word when rendering a pdf with pdf.js?
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Conversion from string “a” to type 'Boolean' is not valid
  • Copy to all folders batch file?
  • jQuery ready not fired after rails link_to is clicked
  • How to use carriage return with multiple line?
  • D3 nodes and links from JSON with nested arrays of children
  • Linq Objects Group By & Sum
  • Optimizing database types to compact database (SQLite)
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Adding custom controls to a full screen movie
  • Akka Routing: Reply's send to router ends up as dead letters
  • AT Commands to Send SMS not working in Windows 8.1
  • Data Validation Drop Down Box Arrow Disappearing
  • Comma separated Values
  • Buffer size for converting unsigned long to string
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Error creating VM instance in Google Compute Engine
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Is it possible to post an object from jquery to bottle.py?
  • reshape alternating columns in less time and using less memory