Insert background image as a d3js object - d3.js

I have a few charts made in d3js and I would like to add an image to some graph as a backround photo is there a specific function in d3js that can take an image an put it as a backgroud iamge for the svg. I dont want to declare the backroud image in the css.

You'll have to declare the background image as such in CSS -- regardless of whether you're doing this statically or with D3. The only alternative would be to have a floating <img> element that you position appropriately, but that would be needlessly cumbersome.

Related

Three.js set texture to inline svg

I am not sue of this is even possible but instead of setting a texture to a jpg like THREE.TextureLoader().load('./texture1.jpg')
I want to set the texture to an INLINE SVG (I want to animate with javascript GSAP).
Is this possible? Probably not :(
Sorry, it's not. You can't use a SVG file as a texture. However, you can load SVG files in three.js via THREE.SVGLoader and then create shape meshes from the resulting path data.
But keep in mind this is a one-time operation. If you animate the SVG, you won't see any effect after the loading process.

Using D3 axis functionality on a canvas

I'm trying to draw an axis on a canvas using D3 functionality (as exampled here https://www.tutorialsteacher.com/d3js/axes-in-d3). However every example I've seen is using an SVG while I wish to use canvas. On the other hand I didn't see any indication, in their documentation or elsewhere, that it can't be done in canvas.
Is it possible? If so, how?
In short: no, that's not possible.
D3 is pretty much render agnostic, meaning it can be used to create SVG, Canvas, other HTML elements etc. However, some modules are indeed quite specific, and that's the case of d3-axis.
If you have a look at d3-axis source code you'll see that it append SVG <path>, <line> and <text> elements for creating the axis. For instance:
path.enter().insert("path", ".tick")
Finally, here you have a discussion on this subject, where Bostock (D3 creator) abandons the idea of modifying the d3-axis module for creating axes on HTML canvas.

Customizing Google Visualization PieChart look and feel with circular border and slice margins

I am using Google's Visualization API to create embedded Pie Charts in my web application.
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
The API works great, I am just having a problem with the look and feel customization.
http://code.google.com/apis/chart/interactive/docs/customizing_charts.html
I can't figure out if there is a way to:
Make the border around a Pie Chart Circular and not rectangular
Editing the width and color of the pie slice margins/seperators?
Here is what I would do:
Using Firebug with Firefox select the chart and look at the CSS. Find the name of the border by selecting it with Firebug.
Next:
1.) Create a CSS to remove the border and embed the chart into a DIV with the border you want. Depending on browser compatibility you may want to use images instead of CSS for the rounded border.
OR
2.) Use CSS to change the border into what you want.

Imagen from Canvas

I'm trying to get the data from a canvas and set the src attribute of a img element. The problem here is that, the canvas has a background image setted with css, not with canvas methods. Is there any way or method to extract the background image so the toDataURL method could catch it?
Thanks
I guess there is a solid reason why you are not drawing the background image to the canvas itself so I can offer you this solution:
Draw the background-image to a second canvas element positioned below the first canvas.
When you want to take the canvas data and use it create a third canvas (no need to attach it to the DOM or make it visible.
Draw the background canvas onto it and then draw the main canvas on top.
Take the data from the third canvas.
Voila.

Replaceing color on a image realtime

First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image

Resources