Given access to suitable topojson and bitmaps, I use the topoJSON file to generate a SVG viz via D3js. Then I append a bitmap to it via :
// Append bitmap
svg.append("image")
.attr("xlink:href", "./myimage.png")
.attr("width", width)
.attr("height", height)
.attr("class", "bg");
But this actually just add a link toward the image. Also, when I select the dataviz DOM, and save it as SVG, I don't have the bitmap binary, but just the bitmap's link.
Is it possible, and how to really embed my .png binary into my SVG DOM via D3js or javascript ?
See also: https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , where you can try to download the SVG.
This example shows how to draw an image to a canvas element and use the .toDataURL function to get a snapshot of this canvas into a string that you can then use as the xlink:href attribute:
http://bl.ocks.org/emeeks/707681f1f5b4a2063d6e
Related
I'm trying to create a d3 force graph with countries' flags, using a spritesheet for the imgs.
I guess I'm still having a hard time understanding d3 syntactically. I was going to use a background-image from a css flag class, and then the subimages would have background-positions. However, adding an img with a class, as in:
var nodesDrawn = d3
.select("#container")
.selectAll("img")
.data(nodesData)
.enter()
.append("img")
.attr('class', function(d){return "flag flag-"+d.code;})
;
produces images, but doesn't work with the force graph... force nodes without links
Alternatively I have produced the graph itself, and do have nodes that work, but can't use images instead of svg circles... force links without nodes
var nodesDrawn = svg
.append("g")
.selectAll("img")
.data(nodesData)
.enter()
.append("img")
.attr('class', function(d){return "flag flag-"+d.code;})
;
And you can see that with links but not nodes, I'm trying to append the nodes to an svg, whereas the working images are being appended to the body directly. Can anyone help me understand how this works?
img is an HTML tag, and the graph you're building is SVG. Once you start working inside of a svg tag on a page, you're dealing with SVG elements, not HTML elements.
You can, though,
Put HTML inside of SVG by using the foreignObject tag
Use the SVG equivalent of the img tag, which is the image tag
I'm learning how to plot charts using D3.js on SVG objects.
My code creates elements in DOM objects, but they do not display.
If I run DOM inspector and copy all elements to another html document and display that the rectangles are visible.
I'm trying to plot two static rectangles on JSFiddle
SVG is case sensitive so you want
svg = d3.select("div#Wykres2")
.append("svg")
.attr("width", szerokosc)
.attr("height", wysokosc)
.text("not work :(");
I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3).
This is the code:
d3.select("#chart1 svg")
.append("svg:image")
.attr("xlink:href", "img/icons/sun.svg")
.attr("width", 40)
.attr("height", 40)
.attr("x", 228)
.attr("y",53);
As you can see I'm setting "xlink:href" attribute, but d3 changes this to href in the browser:
<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>
In fact, this code works perfectly if I use png extension. Any idea?
The code should work as is - here you can see an example of attaching an .svg file to d3:
http://jsfiddle.net/am8ZB/
Don't forget that it's possible the picture is actually there but you just can't see it-
you should inspect the page using the browser developer tools to see whether the picture has been placed out of the view area (due to your x/y values, for example).
more info on #chart1 would help in this case.
I have a set of shapes that I want to use in D3. They have defined borders and are in png format. I can't figure out how to use them though. This seems like it should be supported, but I've searched around the web and on SO and can't seem to find out how to do so. Can someone point me in the right direction please?
SVG shapes are loaded as paths or, in the case of predefined shapes like circles, ellipses and rectangles, as those shapes with attributes that determine their size.
If you're loading pngs, you need to load an image, like this:
newImage = svg.append("svg:image")
.attr("xlink:href", "../yourImageNameAndPath.png")
.attr("width", 280)
.attr("height", 280);
Does anybody know how to display a greyscale image, i.e. a 2-D array of pixel intensities,using d3? I can't seem to find any examples of it anywhere, is it going to be tricky? Any help / links / pointers appreciated!
If just want to display an image, use the image element and the "xlink:href" attribute. For example:
svg.append("image")
.attr("xlink:href", "my.png")
.attr("width", 960)
.attr("height", 500);
If you want to colorize a grayscale image, then see this colorized heightmap example which uses quantiles to create a diverging color scale, and with HCL interpolation for better perception:
If you have your data in some other representation, these examples might be useful:
heatmap from CSV using SVG rect elements
heatmap from JSON using Canvas
Lastly, if you have individual samples rather than a precomputed 2D histogram, you’ll need to bin the data before generating one of the above heatmaps.