I am using gRaphaëlJS pie chart to create some color "buttons" for a color picker.
What I want:
When a pie chart ("button") is clicked I want an image to appear in the middle of that pie chart to indicate to the user that this button/color is selected.
Problem is: I'm failing in adding that image.
What have I tried:
gRaphaëlJS puts a "cover" over each pie chart so I tried to add a paletteObj.covers[0][0].setAttribute('class', palette + ' sliderPalette'); to the cover SVG element.
Tried to add paletteObj.series.items[i].node.setAttribute('style', "background:url('images/selected01.png')"); to the actual pie chart ("button") SVG element.
I tried to use jQuery to dynamically add a CSS style to my button as so:
$('.' + palette).css('background', "url('images/selected01.png')");
$('.' + palette).css('background-repeat', "no-repeat");
$('.' + palette).css('background-position', "center");
$('.' + palette).css('background-attachment', "fixed");
$('.' + palette).css('background-color', "transparent");
I tried to simply use good old CSS:
.sliderPalette { background: url('images/selected01.png'); }
I tried what was written here by robertc about <defs> and <pattern>
Why can't I add a BG image like to any other DOM element?
My code can be found here: http://jsfiddle.net/QBVKy/4/
I appreciate any help on this.
D.
P.S - could anyone with enough reputation (1.5K) please add a tag for RaphaëlJS? I see that snap.svg has one :-)
Related
Aiming to keep good separation of concerns between content and styling in my code, while acknowledging that creating charts with D3 blurs the lines a little, I am trying to figure out how to fully control the styling of a D3 chart with CSS. For example, consider the following where I create my SVG:
d3.select(container).append('svg')
.attr('id', 'mySvg')
.attr('width', window.innerWidth)
.attr('height', window.innerHeight).
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
Or where I create a scale:
d3.scaleTime().domain(d3.extent(myData)).range([ 0, this.width ]);
In both cases I am referencing style values in the code, i.e. in order to create my SVG chart I have to hardcode style-related values.
Is it possible to do all of this styling etc. with CSS?
const link = gLink.selectAll('path')
.data(links, d => d.target.id);
const linkEnter = link.enter().append('path')
.attr('stroke-width', function (d) {
return 10;
}
Try to provide Stroke width for the lines to increase the thickness
You can use CSS as much as you are able. The demands of a interactive chart sometimes don't make it easy though. The simplest solution, I find is:
d3.select(container).append('svg')
.attr('id', 'mySvg')
.classed('chart', true)
Now the svg element will have the class, .chart.
I'm trying to rotate an image using the CSS property "transform".
Here is my code :
http://jsfiddle.net/Ucph5/4/
And here is the part (using jquery) that makes the rotation :
$('#rotationX').change(function () {
var rotationX = $(this).val();
for (index = 0; index < selectedElements.length; ++index) {
var selectedElement = $('#' + selectedElements[index]);
selectedElement.css('transform',
'rotateX(' + rotationX + 'deg) ' +
'rotateY(0deg) ' +
'rotateZ(0deg)');
}
});
The problem is that when I select an image (by clicking on it), then use the "range" input to rotate the actual image, and finally move my mouse back over the image, the cursor should be a "cursor", as stated in my CSS. But it appears that only half the image shows the "cursor", the other half seem not to be considered as part of the image and displays a mouse in its normal representation.
This problem does not appear on Firefox (I did not test with Internet Explorer or Safari).
I hope to be clear in my explanation. If you don't understand, I suggest you to click on one of the images, notice that the cursor is visible everywhere over this image, then change the "range" input value, go back over the image, and notice that the cursor appears only on half the image, and not the other.
Does anyone have any idea why this happens ? I tried using the "-webkit-transform" and I still have the problem.
Thanks in advance. :)
The selectable class is in the same z plane that the div that contains it.
When you rotate it, half of it is above the div, and the other half is under the div.
The half that is under the div wont't change the cursor, because it is the div and not the selectable that is under the cursor.
To solve it, make it stay above the parent div (with a translateZ)
selectedElement.css('transform',
'translateZ(100px) ' +
'rotateX(' + rotationX + 'deg) ');
By the way, you don't need your rotateY(0deg)
updated demo
I'm trying to find out how to have a item change color when clicking different colors button.
Some thing like in the following site
http://www.imprintablefashion.com/cgi-bin/brand/site.w?location=olc/cobrand-product.w&category=3&prb=&srb=&mill=&shade=&color=&product=8398&frames=no&target=main&sponsor=004974&nocache=77902
I'm using WordPress. If anyone can point me to the right direction that would be great. Any
idea of examples would be greatly appreciated.
You actually need to have several images. Each time you press on item/button, you will change the image in the image place holder in your HTML to the desired one.
// JS
function changeImg()
{
// some logic like swicth to select the image
document.getElememtById("image_cont").innerHTML = "<img src='" + some_image + "'/>";
}
// Html
<div id="image_cont"></div>
<button onclick="changeImg()">Change the Image</button>
// so on
Then you can use some logic in your function to select the image you desire.
We can use canvas for drawing custom shapes.
I need to draw my shape dynamically as a canvas item and place it for a div background item.
My pages generates run time and they aren't static html code so i can't use tricky methods.
What's your idea?
Regards
Looks like you searching for toDataURL().
UPD:
Here a usage exaple:
dataUrl = your_canvas.toDataURL();
your_div.style.background='url('+dataUrl+')'
Live demo on jsFiddle
Sounds like you need canvas2image: https://github.com/hongru/canvas2image
You can create a canvas and then get the contents as a png:
var canvas = document.createElement("canvas");
....do stuff here...
var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
Then all you need to do is use the png as a background image:
document.body.style.background = "url(" + img.src + ")";
Please correct me if any of this is wrong.
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.