I have SVG files created elsewhere (using MS Visio) which I would like to use as background for a visualization, where some positioning is driven by the placement of items in the SVG graphic. Ideally, I would be able to manipulate the imported SVG data directly, and then use it to create elements in the calling document using D3.
Is there a simple way to import an existing SVG document into a data structure using D3, similarly to the way that JSON can be imported? I've tried d3.xml, but don't seem to get a useful data structure. Importing the graphic with an IMG tag doesn't populate the DOM with SVG elements as far as I can see.
One small complication: it must also work in IE9! (ImportNode doesn't work)
Thanks for the ideas. I found out what to do in the end. It is possible to import the SVG file using a d3.xml call. The parsing is done, but the complication is how to understand the DOM structure which is produced. IE9 seems to have a problem with placing the imported node, but I don't need that behaviour as I only want to use aspects of the incoming SVG, and will be regenerating SVG using D3
Related
I'm trying to modify this d3js graph example https://bl.ocks.org/nitaku/7512487 to generate and download as an image. I can get it to work with just the nodes, but can't seem to get the lines (edges) between the nodes to save.
Pasting the following into the console on the example above will generate the image of the nodes:
function svg2img(){
var svg = document.querySelector('svg');
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
var b64start = 'data:image/svg+xml;base64,';
var image64 = b64start + svg64;
return image64;
};svg2img()
For some wider context, it's used within a Python Flask app - I allow the user to create a graph network, then require it to be downloaded.
Many thanks!
When you export an SVG to an image like that, you lose all styles that are not inline. After all, it doesn't have access to the CSS files any more, when it's encoded as base64. You are not the first to have encountered this problem, but if you want do do it yourself, you'd need to first traverse the SVG nodes, then get their styles using window.getComputedLayout(node), and then export it. Or you can change the D3 code to apply all styles directly onto the nodes using .attr() or .style().
If you're fine using outside tools, there are many just on github alone, like this one, this one, and this one. You can install them or just use their code as inspiration.
I am new to d3 but I am hoping that it possible to create a chart in d3 and output the chart to a file without displaying it on a page first. Is it? I would like to include various charts in a pdf document using fpdf and import into the pdf a chart or two.
I have been searching around for a solution to this for some time now. While I can see that you can:
Use d3 (chart.js etc) to generate a chart and display it on screen in a page
Export the image to file on the server
And then create the pdf importing the saved image
But I want to avoid any on screen display and for the image of the chart to be saved to the server directly so that fpdf can import it in.
This seems to me something that would be required frequently but I can't seem to find a solution.
An option seems to be to use something like phantomjs as an interim step but I think that this needs to be running on my host. It would be great if it could be exported to file driectly from d3. Is this possible?
I created lots of D3 chart in the application .
But right now my requirement is to save D3 chart in any format like png/gif or pdf.
I searched a lot and every one say we can use canvas for that.
Can anyone give any example or link for that...
Conceptually I am clear about that like
Use the canvg JavaScript library to render the SVG image using Canvas: https://github.com/gabelerner/canvg
Capture a data URI encoded as a JPG (or PNG) from the Canvas, according to these instructions: Capture HTML Canvas as gif/jpg/png/pdf?
What I want actually if any one have implemented, then could you please share the code.
After searching many resources and trying many things, I found SaveSvgAsPng
on GitHub.
It's very easy to implement and to use with resources available on README page on the same link.
Steps
Add Javascript library to your project.
Write a function with saveSvgAsPng call, include other options as required.
Example usage
saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png");
Example function using d3.js
// I have button in html with id="download"
d3.select("#download")
.on('click', function(){
// Get the d3js SVG element and save using saveSvgAsPng.js
saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"});
})
For this example, my plots are small for a web page so increased size to double for download and rather than transparent background as default I changed to white.
SaveSvgAsPng worked for me too. But if you want it to work in IE, you need to include "canvg" and pass it as parameter as below:
function saveAsImage(name, id) {
var svg = $('#'+id).find('svg')[0];
saveSvgAsPng(svg, name + '.png', { canvg: canvg, backgroundColor: 'white'});
}
"backgroundColor" parameter is also useful when your graphs need to be saved with a background.
http://www.evolutionoftheweb.com/
Question is:
What type of chart plugin they used in JavaScript like jqplot, float plugin?
If not, then how did they make it? is it just image or canvas?
If you look at the page source you will find that all the logic is in the /js/all.js file. If you search this you can find things like: jquery, d3, and other libraries. It seems that majority of work is done with d3.
I work on a d3js project and I saw some tutorial with append("g") and other with append("svg:g") without getting the difference between both.
In the very early days of D3 you were required to use the svg:g syntax because of the way SVG elements are appended to the DOM. Later versions of D3 don't require these "hints" to insert SVG elements, so the proper way to do this now would be with a simple g.
The technical details behind this are rather dull, SVG requires a namespace, so when you insert or manipulate SVG elements you use document.createElementNS('a', "http://www.w3.org/2000/svg) white plain HTML uses document.createElement('a'). Since D3 can manipulate both SVG and HTML d3.append('svg:a') was a way of saying this is an SVG anchor.
I got an answer on d3js API, its a namespace question. In svg:g, svg is the namespace (optional).
My fault, sorry i must better read API