I'm trying to add interactivity to a network graph I made in Gephi, which outputs SVG. I'm using a Raphael template that likes my nodes to be inputted as SVG circles. The problem is that my SVG circles from Gephi are actually bezier curves. For example:
<path fill="#D52A2A" d="M663.395,426.958c0-2.869-2.324-5.194-5.193-5.194s-5.191,2.325-5.191,5.194
c0,2.867,2.322,5.189,5.191,5.189C661.069,432.148,663.395,429.826,663.395,426.958"/>
Is there any way to convert a path like this to a standard SVG circle element with an x, y, and radius?
You could analyze the paths, but it's easier if you know which paths are circles to begin with, then you could do a quick approximation like this:
var p = document.querySelector("path");
var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
var b = p.getBBox();
c.cx.baseVal.value = b.x + b.width/2;
c.cy.baseVal.value = b.y + b.height/2;
c.r.baseVal.value = b.width/2; // assuming width and height are the same
p.parentNode.appendChild(c);
Hints that your path is a circle might be that the bbox width and height are very close to equal, or that the path 'd' attribute gephi outputs uses the same form always for circles (not sure if that's the case).
Gephi is opensource, so another option is to look at making it output what you want to begin with.
Update: here's a jsfiddle showing this.
Related
Using d3's d3.svg.line produces a line which looks after magnifying only in the y-dimension like this one
Here is the corresponding path element
<path d="M 70.13775,
303.1818181818182 L 73.03775,
285.9090909090909 L 75.93775,
402.5 L 78.83775,
402.5 L 81.73775,
419.77272727272725 L 84.63775,
342.0454545454545 L 87.53775"></path>
As one can see, when the pen is moved to the right, the width of the corresponding line segment is a different one compared to the width of the line of the path segment, when the pen is moved vertically.
Question: Is it possible to draw the line in a such way that the width of line is the same everywhere? As if one draws the line with holding a pen with a round brush perpendicular to the drawing area.
If you want to scale your line along one axis, instead of using an svg transform you would probably be better off using a d3.scale to scale your incoming data when you make your d3.svg.line().
Lets say you have a d3 scale called myScale
Then when you make your d3 svg line, you can use the scale to modify one of the coordinates:
var lineGen = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return myScale(d.y);});
The solution of using vector-effect will probably give you the result you want in bleeding edge browsers, but it seems like overkill to use an effect to do something this simple, and the lack of browser support for SVG1.2 features might become problematic for you. If you were trying to fix a static svg file that would probably be the way to go, but since you are generating it with d3, you might as well use the built-in methods for scaling.
EDIT
For a simpler solution, you could even scale it by a constant factor:
var scaleFactor = 1.75;
var lineGen = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y * scaleFactor;});
I am drawing polygon by capturing mouse clicks on canvas and then passing these points to fabric.Polygon. So, in this manner I'm drawing multiple polygons.
What I need know is, I want to get the mouse co-ordinates (pixel points on canvas) for the polygon which is selected now?
I have tried with:
canvas.getActiveObject().get('points');
But this is giving some negative and some positive values.
So, can u please tell me a way to find out the polygon points?
Polygon points are relative to its center so you can get their "absolute" position like so:
var polygon = canvas.getActiveObject();
var polygonCenter = polygon.getCenterPoint();
var translatedPoints = polygon.get('points').map(function(p) {
return {
x: polygonCenter.x + p.x,
y: polygonCenter.y + p.y
};
});
Let's check how this looks:
translatedPoints.forEach(function(p) {
canvas.getContext().strokeRect(p.x-5, p.y-5, 10, 10);
});
I think this will only work if polygon's angle is at 0 (otherwise need to "rotate" points coordinates as well).
It looks like that from version 2.0 they changed the coordinates of the polygon. Before 2.0 points relative to the center of the polygon; after 2.0 they are absolute to the canvas;
Check out my response to the similar questions https://stackoverflow.com/a/53710375/4681279
I have an SVG layout (from D3) of a tree. I have an SVG element in my HTML that takes up 100% of the width and height of the page. Then, within that SVG element, D3 renders a group element with a bunch of circles and lines in it. For example:
<svg style='width:100%;height:100%;'>
<g>
...stuff...
</g>
</svg>
I want to be able to zoom and pan so that a certain portion of the tree (group element) takes up the screen. I have the exact coordinates of the area I want to zoom in on, so ideally, I want to move the SVG element X pixels up and to the left, then scale the whole element by Y. How can I best do that?
From what I'm reading, the viewBox attribute is best for this, but I just can't figure out how I would be able to zoom in on just one portion. This example seems to get at what I want, but my SVG element is measured in percentages, not pixels. And even though the coordinate system is supposed to be arbitrary, I'm having a hard time converting between the two.
Here, I use this to zoom into certain regions of the SVG image. Change cx to the x coordinate, cy to the y coordinate, width and height are your call. The line you should be interested in is the svgDocument.setAttribute(...)
function zoomTarget1() {
var svgDocument = document.getElementsByTagName('svg')[0];
var cx = 20;
var cy = 20;
var width = 610;
svgDocument.setAttribute("viewBox", cx+" "+cy+" "+width+" 590");
var reShow = svgDocument.getElementById("FloorSelection");
showReturnButton(cx,cy, width, reShow);
}
For a project we are trying to make a circle into a line (and back again) while it is rotating along a linear path, much like a tire rotates and translates when rolling on a road, or a curled fore finger is extended and recurled into the palm.
In this Fiddle, I have a static SVG (the top circle) that rotates along the linear black path (which is above the circle, to mimic a finger extending) that is defined in the HTML.
I also use d3 to generate a "circle" that is made up of connected points (and can unfurl if you click on/in the circle thanks to #ChrisJamesC here ), and is translated and rotated
in the function moveAlongLine when you click on the purple Line:
function moveAlongLine() {
circle.data([lineData])
.attr("transform", "translate(78.5,0) rotate(-90, 257.08 70) ")
.duration(1000)
circle.on("click", transitionToCircle)
}
The first problem is that the .duration(1000) is not recognized and throws a Uncaught TypeError: Object [object Array] has no method 'duration' in the console, so there is a difference between the static definition of dur in SVG and dynamically setting it in JS/D3, but this is minor.
The other is should the transform attributes be abstracted from one another like in the static circle? in the static circle, the translate is one animation, and the rotation is another, they just have the same star and duration, so they animate together. How would you apply both in d3?
The challenge that I can not get, is how to let it unroll upwards(and also re-roll back), with the static point being the top center of the circle also being the same as the leftmost point on the line.
these seem better:
I should try to get the unfurl animation to occur while also rotating? This seems like it would need to be stepwise/sequential based...
Or Consider an octogon (defined as a path), and if it were to rotate 7 of the sides, then 6, then 5.... Do this for a rather large number of points on a polyhedron? (the circle only needs to be around 50 or so pixels, so 100 points would be more than enough) This is the middle example in the fiddle. Maybe doing this programmatically?
Or This makes me think of a different way: (in the case of the octogon), I could have 8 line paths (with no Z, just an additional closing point), and transition between them? Like this fiddle
Or anything todo with keyframes? I have made an animation in Synfig, but am unsure ho get it to SVG. The synfig file is at http://specialorange.org/filedrop/unroll.sifz if you can convert to SVG, but the xsl file here doesn't correctly convert it for me using xsltproc.
this seems really complicated but potential:
Define a path (likely a bézier curve with the same number of reference points) that the points follow, and have the reference points dynamically translate as well... see this for an concept example
this seems complicated and clunky:
Make a real circle roll by, with a growing mask in front of it, all while a line grows in length
A couple of notes:
The number of points in the d3 circle can be adjusted in the JS, it is currently set low so that you can see a bit of a point in the rendering to verify the rotation has occurred (much like the gradient is in the top circle).
this is to help students learn what is conserved between a number line and a circle, specifically to help learn fractions. For concept application, take a look at compthink.cs.vt.edu:3000 to see our prototype, and this will help with switching representations, to help you get a better idea...
I ended up using the same function that generates the circle as in the question, and did a bit of thinking, and it seemed like I wanted an animation that looked like a finger unrolling like this fiddle. This lead me to the math and idea needed to make it happen in this fiddle.
The answer is an array of arrays, with each nested array being a line in the different state, and then animate by interpolating between the points.
var circleStates = [];
for (i=0; i<totalPoints; i++){
//circle portion
var circleState = $.map(Array(numberOfPoints), function (d, j) {
var x = marginleft + radius + lineDivision*i + radius * Math.sin(2 * j * Math.PI / (numberOfPoints - 1));
var y = margintop + radius - radius * Math.cos(2 * j * Math.PI / (numberOfPoints - 1));
return { x: x, y: y};
})
circleState.splice(numberOfPoints-i);
//line portion
var lineState = $.map(Array(numberOfPoints), function (d, j) {
var x = marginleft + radius + lineDivision*j;
var y = margintop;
return { x: x, y: y};
})
lineState.splice(i);
//together
var individualState = lineState.concat(circleState);
circleStates.push(individualState);
}
and the animation(s)
function all() {
for(i=0; i<numberOfPoints; i++){
circle.data([circleStates[i]])
.transition()
.delay(dur*i)
.duration(dur)
.ease("linear")
.attr('d', pathFunction)
}
}
function reverse() {
for(i=0; i<numberOfPoints; i++){
circle.data([circleStates[numberOfPoints-1-i]])
.transition()
.delay(dur*i)
.duration(dur)
.ease("linear")
.attr('d', pathFunction)
}
}
(Note: This should be in comments but not enough spacing)
Circle Animation
Try the radial wipe from SO. Need to tweak it so angle starts at 180 and ends back at same place (line#4-6,19) and move along the X-axis (line#11) on each interation. Change the <path... attribute to suit your taste.
Line Animation Grow a line from single point to the length (perimeter) of the circle.
Sync both animation so that it appears good on all browsers (major headache!).
Here is my script:
<script>
Raphael.fn.polyline = function(pointString) {
return this.path("M" + pointString);
};
window.onload = function() {
var paper = Raphael("holder", 500, 500);
paper.circle(100, 175, 70).attr({"stroke-width":10, "stroke":"red"});
var a = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(25, 100, 175);
var b = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(45, 100, 175);
var c = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(65, 100, 175);
var group = paper.set();
group.push(a, b, c);
group.translate(60);
};
</script>
When I use raphael-1.5.2, the result is:
When I use raphael 2.0, the result is:
In 1.5.2 it uses the rotate transformation to rotate the objects around the circle and in 2.0 it uses the matrix transformation. I assume the matrix transformation transforms the coordinate system for that object, so when you later translate the object in the xy direction it translates it in the xy that is relative for that object.
I need to be able to add green objects around the edge of the red circle and then be able to drag and move everything in the same direction. Am I stuck using 1.5.2 or am I just missing how translate has changed in 2.0?
Use an absolute transform instead of translate. Say you want to move of 100 in x and 50 in y do this:
Element.transform("...T100,50");
Make sure you use a capital T and you'll get an absolute translation. Here's what the documentation says about it:
There are also alternative “absolute” translation, rotation and scale: T, R and S. They will not take previous transformation into account. For example, ...T100,0 will always move element 100 px horisontally, while ...t100,0 could move it vertically if there is r90 before. Just compare results of r90t100,0 and r90T100,0.
See documentation
Regarding translate, according to the documentation in Raphael JS 2.0 translate does this:
Adds translation by given amount to the list of transformations of the element.
See documentation
So what happens is it appends a relative transformation based on what was already applied to the object (it basically does "...t100,50").
I suspect that with 1 your transform correctly treats the set as one object but with 2 the little greeny things rotate indepently
Two is a complete redesign so little disconnects like this will occur
Use getBBox and find the centre of your set, then use 1 rotate command on the whole set specifying cx cy derived from getBBox