d3 transition not following path - javascript

I like to make the aircraft follow the path. But whatever I have tried there is a shift between the transition path and the actual drawn path on the screen. Please look at the jsfiddle
d3.selectAll('.aircraft').transition()
.duration(7500)
.attrTween('transform', translateAlong(d3.select('#samplePath').node()))
function translateAlong(path) {
let l = path.getTotalLength()
// debugger
return function (i) {
return function (t) {
let p = path.getPointAtLength(t * l)
console.log(p.x, p.y)
return 'matrix(-0.359863 -0.230143 0.230143 -0.359863' + p.x + ' ' + p.y + ')'
}
}
}

You are missing a space after the second -0.359863 in the matrix definition:
return 'matrix(-0.359863 -0.230143 0.230143 -0.359863 ' + p.x + ' ' + p.y + ')'

Related

Color gradient from red to green without yellow

I have some colored text to indicate quality (red = bad, green = good).
When the quality is at 50%, the text is yellow and barely legible. Is there any way to have a gradient go from red to green without yellow in the middle?
(The quality could be any value, so setting the colors manually won't work.)
for(i=0;i<=100;i+=10) {
$('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}
function color(quality) {
var h = 355 + 125 * quality;
var s = 130 - 60 * quality;
var l = 60;
return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
An alternative is this function, but it just returns an ugly brown in the middle:
for(i=0;i<=100;i+=10) {
$('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}
function color(quality) {
var r = 255 * (1 - quality);
var g = 255 * quality;
var b = 0;
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here's a possible way to do it using hue-rotate, but it has the dirty-brown problem rather. I'm including it because it uses a css filter rather than a css color, which might be of interest because it's a different approach. The constant 1.2 was reached by trial and error rather than calculation, so could be adjusted to taste.
for(i=0;i<=100;i+=10) {
$('body').append('<div style="color:hsl(355, 130%, 60%); filter:hue-rotate(' + i * 1.2 + 'deg)">Quality ' + i + '</div>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have modified my function to reduce the l-value the closer it gets to .5 (yellow). Obviously, the yellow is a bit muddy now, but overall I feel this is a good solution :)
for(i=0;i<=100;i+=10) {
$('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}
function color(quality) {
var h = 355 + 125 * quality;
var s = 130 - 60 * quality;
var l = 45 + Math.abs(0.5 - quality) * 30;
return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Fabricjs get RGB pixel value after zoom or pan

I'm having trouble getting the correct mouse coordinates on the canvas after preforming pan or zoom.
I have this code for sampling coordinates and RGB:
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = parseInt(mouse.x);
var y = parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});
problem is that after zoom/pan the coordinates are 'wrong',
for example the top left corner in not (0, 0) but (-someX, -someY)...
any help will be appreciated
EDIT: I've found the mistake,
this will fix it. hope it will be useful for someone else
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);
This code solves it,
Hope it could be useful for others.
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});

IE invalid argument because vars equal NaN

The penultimate line gives an "Invalid argument" error in IE11 - other browsers are fine run the code fine.
var active = $('.interactivemap-minimap-active', this.el);
if (x === undefined) x = self.x;
if (y === undefined) y = self.y;
var width = Math.round(self.container.width() / self.contentWidth / self.scale * this.el.width()),
height = Math.round(self.container.height() / self.contentHeight / self.scale * this.el.height()),
top = Math.round(-y / self.contentHeight / self.scale * this.el.height()),
left = Math.round(-x / self.contentWidth / self.scale * this.el.width()),
right = left + width,
bottom = top + height;
console.log("pass2: width=" + width + ", height=" + height + ", top=" + top + ", left=" + left + ", right=" + right + ", bottom=" + bottom);
active.each(function() {
$(this)[0].style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
});
the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
If I comment out the troublesome line, the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
width=140 , height=162 , top=-1 , left=0 , right=140 , bottom=161
So it looks like it takes a moment to populate those variables with actual data but it starts the last function when the are still equal to Nan and then errors.
Is there any way to get around this?

Snap.svg scale and animate SVG

I'm trying to scale my SVG with g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); and then animate wheelAnimation(bbox.cx, bbox.cy, 1500);
var i = 0;
function wheelAnimation(cx, cy, speed){
i++;
g.animate(
{ transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays.
wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite.
}
);
}
But my SVG didn't scaling. It's only rotates. If I remove rotation - SVG scaling. How to combine it to immediately scale and then animate rotation?
Plunker example
I've never used Snap.svg but you might try this:
var i = 0;
function wheelAnimation(cx, cy, speed, scale){
i++;
g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
g.animate({
transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite.
}
);
}
Hope this helps you :)
See Plunkr

Changing the appearance of D3 links

I want to visualize data as a tree, but also I want to customize default link appearance. There shown default appearance, but I want to create links which looks like Rational Software Architect links. Is it possible?
The links are SVG path elements. You can style them using CSS to change the color, width etc. For the arrow heads, you can use SVG Markers. To add labels, you would need to add additional SVG text elements. You could for example add a new select with the tree links as data that create the SVG text elements for the UML cardinality.
I've done it with writing my own path handler. Here is the sample code:
function elbow(d) {
var radius = 10;
var xOffsetSign = Math.sign(d.source.x - d.target.x);
var yOffsetSign = Math.sign(d.source.y - d.target.y);
if (xOffsetSign != 0) {
var ellipseXDirection = (xOffsetSign * yOffsetSign) > 0 ? 1 : 0;
return "M" + d.source.x + "," + d.source.y
+ " H" + (d.target.x + xOffsetSign * radius)
+ " A" + radius + "," + radius + " 0 0," + ellipseXDirection + " " + d.target.x + "," + (d.source.y - yOffsetSign * radius)
+ " V" + d.target.y
+ (d.target.children ? "" : "h" + margin.right);
} else {
return "M" + d.source.x + "," + d.source.y
+ " H" + d.target.x + " V" + d.target.y
+ (d.target.children ? "" : "h" + margin.right);
}
}
Function Math.sign is my own implementation

Categories

Resources