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!
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
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 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.
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