how to select and rotate the texts of the x axis only !
In this Example :
http://dc-js.github.io/dc.js/examples/heat.html
So select from 1 to 20 and rotate them !
I tried this way :
chart
.selectAll("g.cols.axis > text")
.attr("text-anchor", "middle")
.attr("transform", function () {
return "rotate(-20)"
})
.style("fill", "blue");
but it seems that I'am selecting the whole X-axis and not every text separatly .
The fill style works fine but the transformation does not work properly and the axe is entirely rotated.
You must rotate each text element on X Axis around its own center. To do that you must specified the rotation angle AND the center of rotation
rotate(angle centerX centerY)
With that on mind, you can do:
chart.selectAll('g.cols.axis > text')
.attr('transform', function (d) {
var coord = this.getBBox();
var x = coord.x + (coord.width/2),
y = coord.y + (coord.height/2);
return "rotate(-20 "+x+" "+y+")"
});
Remember do it after call to chart.render(); or your selection will be empty
If you want understand why this, take a look at: https://sarasoueidan.com/blog/svg-transformations/
Here the working code
Is something like this what you're looking for?
.cols.axis text{
transform-origin: center;
transform: rotateX(-20deg);
}
I'm not sure if that's the axis you wanna rotate on since it just moves them up over the chart - but for any axis you can just use rotateX/Y/Z!
Related
how can i space the Collapsible tree nodes in circles going around the root node?Example of picture below.second image what i currently have now.
i know it has something to do with the X and Y position in this method.But i just can't figure out how.
original code i got it from Original code here
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
debugger
// Normalize for fixed-depth.
nodes.forEach(function (d) {
//i know i have to do something here
d.y = d.depth * 180;
});
// Transition to the proper position for the node
//then it will update the transform and translate
enter code here
nodeUpdate.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
solved.this is my outcome.
instead of using translate for my rotating.i use rotate class with transform.
I have a plunker here - https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview
I have 3 three bars that are made with a start and finish posiiton.
The start position can be higher or lower than the finish.
I want to draw arrows on the bars to illustrate if the start is before or after the finish.
I'm drawing the arrows on the bars and adding classes based on if the bar is going up or down.
I then wanted to use css to set the direction of the arrows by rotating them.
This is all working but arrow is not rotating around its center and so is positioned off the bar.
Is it possible to rotate the arrow and line around its center
.arrow-up{
transform: rotate(180deg);
transform-origin: center center;
}
This looks like it is an issue with transform-origin support in SVG - "Keywords and percentages refer to the canvas instead of the object itself". see the Browser compatibility section here. That comment was listed for Firefox but I experience the same problem for Chrome too.
To demonstrate I forced all 3 arrows to use the arrow-up class and you can see that they seem to have rotated around the same point.
https://plnkr.co/edit/yQ4X18eb7VCItxXswMww?p=preview
So, you can use a rotate transform directly on the SVG line. The following plunker has the start of the code you need but you'll need to calculate you centre x and y values form your data.
https://plnkr.co/edit/JyT9ORnnMCETgpMyCjm1?p=preview
Here's the bit of code you need, but as I say you'll need to replace 100 100 with you're centre of rotation x and y values. You'll be able to dispense with the arrow-up and arrow-down class too.
bar.enter()
.append("line")
.attr("x1", d => x(d.phase) + x.bandwidth()/2)
.attr("y1", (d, i) => {
if(d.start < d.finish){
return y(d.finish)+10;
}else{
return y(d.start)+10;
}
})
.attr("x2", d => x(d.phase) + x.bandwidth()/2)
.attr("y2", (d, i) => {
if(d.finish < d.start){
return y(d.finish)-15;
}else{
return y(d.start)-15;
}
})
.attr('class', (d, i) => {
return d.start > d.finish ? 'arrow-up' : 'arrow-up'
})
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)")
.attr("transform", (d) => {
console.log(d.start, d.finish)
console.log(x(d.phase), x.bandwidth()/2)
return `rotate(180 100 100)`
})
I there a (css?) possibility to rotate an element on element:hover and keep the new position when moving the mouse out?
It seems that the element rotates back to it`s default position when the cursor leaves the :hover - area.
edit:
now it seems to work (forgot to say, that i wanted it to happen each time/ multiple times):
var rotate = 360;
$('.artistbutton360').bind({
mouseenter: function() {
$(this).css("-webkit-transform","rotate("+ rotate +"deg)");
$(this).css("-moz-transform","rotate("+ rotate +"deg)");
$(this).css("-o-transform","rotate("+ rotate +"deg)");
$(this).css("transform","rotate("+ rotate +"deg)");
rotate = rotate + 360;
}
});
You can use jquery:
$('element').hover(function(){
$(this).css(whatever);
});
remember adding
$(document).ready(function(){
});
i am trying to rotate a div on y axis using transform but it is not supported in I.E so i used filter as follows
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
but still i cant only rotate it on y axis.. can anyone please help me to find a way to rotate it in I.E.. here is the code
$("#click").click(function() {
$('div').animate({
borderSpacing: -90
}, {
step: function(angle, fx) {
$(this).css('-webkit-transform', 'rotateY(' + angle + 'deg)');
$(this).css('-moz-transform', 'rotateY(' + angle + 'deg)');
$(this).css('transform', 'rotateY(' + angle + 'deg)');
},
duration: 'slow'
}, 'linear');
});
It looks like you are attempting to rotate around the Y axis, which is a 3D transformation. Unfortunately, progid:DXImageTransform.Microsoft.BasicImage (And progid:DXImageTransform.Microsoft.Matrix for that matter) do not support 3D transformations.
Your code should work in IE 10 and above, but you may need to add an additional css line in your step function for "-ms-transform".
I wish I could link to documentation regarding 3D transformations in IE but I have found very little of it myself.
I have made a resizeable custom overlay with an image and it works, you can see it here,
debug. In the upper right hand corner and lower left corner there are some red corner icons that you can drag and resize the image and overlay. The problem is that when you make the image smaller, it leaves behind remnants of the lager scale images.
I then added a function to remove the overlay before drawing the new one, straight out of the example, overlay.onRemove(); It worked, but as soon as you un click the marker it gives the error "parentnode: object is null or undefined", you can see it here debug2
If you view the source on them, the drag listener in on line 173 and calls the overlay = new USGSOverlay(bounds, srcImage, map, 'yes'); on line 194.
The function is on line 71. and looks for ifDrag and then deletes the previous overlay, I am baffled as to why it works but as soon as you un click the marker it throws the error and breaks the script.
It would be awesome if someone could provide me with a fix or workaround to the error. This is a very nice feature to have and am too close to give up. Thanks.
I believe your problem is in the draw function:
var div;
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Size the image's DIV to fit the indicated dimensions.
div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
Don't you want to remove the external declaration of var div and make the references within the draw function reference this.div? I believe that is your problem.
Shouldn't the last lines of draw be implemented like this:
//Remove this line:
//div = this.div_;
this.div_.style.left = sw.x + 'px';
this.div_.style.top = ne.y + 'px';
this.div_.style.width = (ne.x - sw.x) + 'px';
this.div_.style.height = (sw.y - ne.y) + 'px';
You also have similar code in the add function. I suggest that you make the code in add similar - just work directly with this.div_; it looks like you might be getting a reference mixed around.
We came to the conclusion that too many events were fired and killed the script, 'dragend' was the solution (Not perfect but works), works in all browsers and have set opacity at 50% to get the perfect alignment to the location. Appreciate your help. Cheers.