I am using the GitGraph javascript library - http://gitgraphjs.com/
I am currently using the examples file to see how things work in GitGraph. The link to the example file - https://github.com/nicoespeon/gitgraph.js/blob/develop/examples/index.js
Is there any possible way to scale the graph? I tried overriding CSS styles, the quality of graph diminished greatly.
I was expecting something like a GitGraph.scale option? Is that available?
The main project page doesn't make it easy to link, but it looks like the section titled "Define Your Own Template" is what you're looking for?
EDIT:
OK, with a better understanding of what you're looking for, I played around with it myself, and noticed that the canvas element's width and height properties are added to the DOM programmatically in GitGraph.prototype.render(), based on some moderately complicated math involving a bunch of values from the template object, plus a scalingFactor value derived using window.devicePixelRatio.
There doesn't seem to be a way to modify these values before the canvas is rendered, but using the provided graph:render event, you could do it after.
gitGraph.canvas.addEventListener("graph:render", function(event) {
console.log(event.data.id, "has been rendered with a scaling factor of", gitGraph.scalingFactor);
rescale();
}
function rescale() {
var g = document.getElementById('gitGraph');
var w = +g.style.width.slice(0,-2) * 0.5; // < just change these two
var h = +g.style.height.slice(0,-2) * 0.5; // multipliers to the same
g.style.width = w + 'px'; // value
g.style.height = h + 'px';
};
Here's that function working with the official example code (notice that it does screw up the absolutely-positioned detail div):
http://codepen.io/phoward8020/pen/ZOpERB
Does that help?
(EDIT 2: Inline Stack Overflow example code added no value to answer since it's not editable. Replaced with CodePen so readers can verify functionality by changing multiplier values.)
Related
I use fabris.js factories to work with objects canvas. If you change the height of a separate mouse or separate field - it works. If you change the mouse first, then field - to work with well-read false values.
Please help to fix.
Full code
A bug in the video.
Line 83, 84. Setting values:
canvas.getActiveObject().setHeight(parseInt(heightElInput.value));
canvas.getActiveObject().height = parseInt(heightElInput.value);
Somewhere you changing scaleY for the object that's why you have a bug. Insert this code after line 84 and it should work: canvas.getActiveObject().scaleY = 1 - when you resize vertically, if horizontally - canvas.getActiveObject().scaleX = 1; Also, you can you function setHeight, you don't need to use both of them – Observer
I have use the d3.js to visualize my data. And the result like this.
PIC_1
PIC_2
My question is how can I make the data present like PIC_1,the center point local in the fixed position,and the other points (children points) around the center point like a circle.
Now,when I refresh the page the data will reload in the brower and all the points' position will randomly change as well.
So which d3's api or tricks can be used to this purpose. :)
Take a look at this example:
link to jsfiddle
If you exampne the code, and play with layout, you'll see that the root node has special treatment that makes it always remain in the center of the graph (unless you drag it, but even that you can prevent if you want).
On initialization, its property fixed is set to true, so that d3 force layout simulation doesn't move it. Also, it is placed in the center of rectangle containing layout:
root.fixed = true;
root.x = width / 2;
root.y = height / 2;
You ofcourse need to change or add some code in order to integrate this feature to your example, but the core idea is really clear from the example I linked.
Hope this helps. Let me know if you have a question, need a clarification, etc.
I want to create a vertical rule like the one shown at http://bost.ocks.org/mike/cubism/intro/demo-stocks.html that updates its value dynamically according to the user's mouse.
This demo uses cubism.js but I'd like to use d3 and/or jQuery to achieve the same effect.
Any suggestions?
EDIT: I've tried creating rules according to the ones in this thread (How to make a vertical line in HTML), but I don't know how to position it and move it according to the user's mouse position.
You need to update your question to include more detail about what you actually want, but here's one implementation using d3: http://jsfiddle.net/q3P4v/
d3.select('html').on('mousemove', function() {
var xpos = d3.event.pageX;
var rule = d3.select('body').selectAll('div.rule')
.data([0]);
rule.enter().append('div')
.attr('class', 'rule')
.append('span');
rule.style('left', xpos + 'px');
rule.select('span').text(xpos);
});
Note that this depends on some associated CSS, as shown in the fiddle.
I made a script that draws a series of lines on a canvas that makes it look like a sketch. There are two issues with the script. One, why is the y value twice as much as it should be? And two, why is the line several pixels wide and faded out?
I've tried it in both Google Chrome and Firefox and I get the same incorrect results. I realize that I can divide the y value by two to fix the first problem but that part of my question is why do I need to do that. I shouldn't have to.
I think you have two issues:
You need to be more careful in how you calculate the offset of where to draw. I have some code below that demonstrates how to handle this properly.
You aren't setting the width and height on the <canvas> element itself, which means it will scale your lines in funny ways depending how what you've set in your css.
An Example
I built a simple collaborative drawing app using <canvas> and socket.io that lets you draw to the screen like a pencil. You can check it out here:
http://xjamundx.no.de/
The source is also on github if that might help:
https://github.com/xjamundx/CollabPaintJS/ (main repo)
https://github.com/xjamundx/CollabPaintJS/blob/master/public/collabpaint.js (canvas drawing code)
In particular I do something like this to figure out where to draw things:
x = e.clientX + window.scrollX
y = e.clientY + window.scrollY
x -= $game.offsetLeft
y -= $game.offsetTop
Give a width and a height to your canvas; always !
http://jsfiddle.net/mz6hK/7/
fixed
I'd like to build a function like
fromHeretoThere(x1,y1,x2,y2){
//....
}
So that I can move a <div> or an image from one point on the HTML page to another point in a curve.
Is this doable only using Canvas? HTML5? any plugin/scripts yo suggest?
Edit: Here's a work in progress that packages up the second concept described below as a re-usable JS object. You can edit the code or visually drag the curve to see the resulting code:
http://phrogz.net/SVG/animation_on_a_curve.html
I'd personally use SVG, which makes this sort of thing (animating along an arbitrary Bézier curve) trivial using the <animateMotion> element. As a bonus, you can even cause it to calculate the rotation for you. Some examples:
http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
https://developer.mozilla.org/en/SVG/Element/animateMotion
http://devfiles.myopera.com/articles/76/SolarSystem.svg
Note that you don't even have to actually use SVG to display the result; you could simply create an off-screen SVG with this animation and sample the transform of the animated element to get your desired point/rotation.
Alternatively (if you don't want the rotation, or want to calculate it yourself while controlling the rate of traversal) you can create an SVG path and just use getPointAtLength()/getTotalLength() to find where you should be along the path at a given percentage of the total traversal distance. With this you don't even need an SVG document:
// Moving along an S curve from 0,0 to 250,450
var p = document.createElementNS('http://www.w3.org/2000/svg','path');
p.setAttribute('d','M0,0 C350,20 -200,400 250,450');
var len = p.getTotalLength();
for (var i=0;i<=100;i+=10){
var pct = i/100;
var pt = p.getPointAtLength(pct*len);
console.log( i, pt.x, pt.y );
}
// 0 0 0
// 10 65.54324340820312 10.656576156616211
// 20 117.17988586425781 49.639259338378906
// 30 120.2674789428711 114.92564392089844
// 40 100.49604034423828 178.4400177001953
// 50 78.06965637207031 241.1177520751953
// 60 63.526206970214844 305.9412841796875
// 70 74.59959411621094 370.6294860839844
// 80 122.1227798461914 415.8912658691406
// 90 184.41302490234375 438.8457336425781
// 100 250 450
Now all you have to do is set the .style.top and .style.left of your <div> or <img> appropriately. The only 'hard' part is deciding what you want to the curve to look like and defining where to put the handles.
sometimes googling is easier:
http://yuilibrary.com/yui/docs/anim/curve.html
You can use at least:
JavaScript (http://api.jquery.com/animate/)
CSS3 Transitions (http://www.the-art-of-web.com/css/css-animation/)
Canvas (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
CSS3 is probably the easiest, but JavaScript would be the most browser compatible.
You may also want to look at something like this:
http://jsanim.com/
http://processingjs.org/
What is it that you're trying to do?
Using jQuery animate's step function you can animate in any curve you'd like.
For some things using a canvas is better, but for most small and simple animations just changing css values with jQuery (this is what animate does) is faster and simpler.
Here's a quick demonstration I made, built on top of the jQuery.path plugin : http://jsfiddle.net/zVddG/