D3 svg css - rotate line around centre using css - css

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)`
})

Related

dc.js heatmap how to rotate text ?

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!

How can I do an SVG Path drawing animation when the stroke has a dasharray?

Looking to animate the below SVG, which I have got working initially. However, I want it to 'draw' the second SVG in the opposite direction, WITH the dots i've defined.
Is there any way I can do this? Effectively drawing my shape from left to right with the dots.
Codepen: http://codepen.io/anon/pen/gFcAz
The normal dash offset animation trick really only works with solid lines.
This is the closest I managed to get using CSS animations.
http://jsfiddle.net/L4zCY/
Unfortunately the dashes crawl because you have no control over the step rate of the stroke-dashoffset. If you could make it step by 10 at a time, the dashes wouldn't move.
So I think the only way around it is to use Javascript.
var path = document.querySelectorAll("svg path").item(0);
animateDashedPath(path);
/*
* Animates the given path element.
* Assumes the path has a "5 5" dash array.
*/
function animateDashedPath(path)
{
var pathLength = path.getTotalLength();
var animationDuration = 2000;
var numSteps = Math.round(pathLength / (5+5) + 1);
var stepDuration = animationDuration / numSteps;
// Build the dash array so we don't have to do it manually
var dasharray = [];
while (numSteps-- > 0) {
dasharray.push(5);
dasharray.push(5);
}
dasharray.push(pathLength);
// Animation start conditions
path.setAttribute("stroke-dasharray", dasharray.join(" "));
path.setAttribute("stroke-dashoffset", -pathLength);
// We use an interval timer to do each step of the animation
var interval = setInterval(dashanim, stepDuration);
function dashanim() {
pathLength -= (5+5);
path.setAttribute("stroke-dashoffset", -pathLength);
if (pathLength <= 0) {
clearInterval(interval);
}
}
}
Demo here
Update
It looks like there is an issue with in FF. If you create the "right" number of dashes for the path length, it doesn't quite reach the end of the path. You need to add extra.
A version of the demo that works properly on FF is here

css :hover rotate element and keep the new position

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(){
});

Morph circle to oval in openscad

I am trying to create a fan duct in openscad, flattening the duct from circular to oval. Is there a way to do this in openscad? If not, is there any other programmatic way to generate this type of 3d model?
Thanks
Dennis
Assuming by 'oval' you mean elipse, then the following creates a solid tapering from a circle to an ellipse:
Delta=0.01;
module connector (height,radius,eccentricity) {
hull() {
linear_extrude(height=Delta)
circle(r=radius);
translate([0,0,height - Delta])
linear_extrude(height=Delta)
scale([1,eccentricity])
circle(r=radius);
}
}
connector(20,6,0.6);
You could make the tube by subtracting a smaller version:
module tube(height, radius, eccentricity=1, thickness) {
difference() {
connector(height,radius,eccentricity);
translate([0,0,-(Delta+thickness)])
connector(height + 2* (Delta +thickness) ,radius-thickness, eccentricity);
}
}
tube(20,8,0.6,2);
but the wall thickness will not be uniform. To make a uniform wall, use minkowski to add the wall:
module tube(height, radius, eccentricity=1, thickness) {
difference() {
minkowski() {
connector(height,radius,eccentricity);
cylinder(height=height,r=thickness);
}
translate([0,0,-(Delta+thickness)])
connector(height + 2* (Delta +thickness) ,radius, eccentricity);
}
}
tube(20,8,0.6,2);
There is another way by using the „scale“-parameter of linear_extrude(). It „scales the 2D shape by this value over the height of the extrusion. Scale can be a scalar or a vector“ (Documentation). Using a vector with x- and y-scalefactor, you get the modification, you wanted:
d = 2; // height of ellipsoid, diameter of bottom circle
t = 0.25; // wall thickness
w = 4; // width of ellipsoid
l = 10; // length of extrusion
module ellipsoid(diameter, width, height) {
linear_extrude(height = height, scale = [width/diameter,1]) circle(d = diameter);
}
difference() {
ellipsoid(d,w,l);
ellipsoid(d-2*t,w-2*t,l);
}
I like Chris Wallace answer but there was a bug in the Minkwoski, it should be h=Delta.
module tube(height, radius, eccentricity=1, thickness) {
difference() {
minkowski() {
connector(height,radius,eccentricity);
cylinder(h=Delta,r=thickness);
}
translate([0,0,-(Delta+thickness)])
connector(height + 2* (Delta +thickness) ,radius, eccentricity);
}
}
tube(20,8,0.6,2);
I don't know of a way to do it directly, but I can imagine approximating it with a series of stacked slices.
Start with a circle, and have a loop that changes the scale factor smoothly from circle to oval as you add slices to the stack. This will give you a stepped surface. If this is for a 3D printing application, if you make your slice thickness the same as your layer height, you might not even notice.

Trigger Animated Elements reaching div ID

What's up?
I'm looking for a while for a solution or a tutorial to trigger a css3 animation using Jquery.
I know I can add a class to the div to animate it with css3. But I want to add the class only when reaching a div ID ! Not when I reach XX pixels from the top.
Example: Skills bars in http://themes.swiftpsd.com/index.php?theme=flexform
May someone help me or give me a great tutorial?
Btw, you rock guys!
Cheers,
Jhon
This was a fun one, jsFiddle
$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();
if (y > (x.top - 50)) { // -50 so things don't overlap
$(".magic").addClass(
"bounceInRight");
}
else {
$(".magic").removeClass(
"bounceInRight");
}
});
Animation from Animate.CSS

Resources