I'm creating a diagram with D3 and JSON which is based on this:
http://bl.ocks.org/mbostock/4063550
The difference is, I also want to have different shapes for nodes (not just circles, but for example, trianges.)
I have a attribute in the JSON file that says something like "shape":"triangle".
How do I update that index.html file so that I can get different shapes to be displayed?
Really urgently need assistance...any help/advice really appreciated.
Trying modifying this line to be what you want, which is currently drawing a circle:
node.append("circle")
.attr("r", 4.5);
D3 has some built in SVG helpers for drawing symbols: d3.svg.symbol. AS #pfrank suggests, you should be able to append a path instead of a circle and set the d attribute to the output of the symbol helper configured to whatever shape you want.
Related
I'm writing a 'template creation' app using the dcc.Graph image annotation features in Plotly Dash.
The user adds multiple rectangles for specific features in the image (an invoice) and my callback captures the coordinates of each rectangle via the relayoutData variable. I want to use a different color for each rectangle, but can't figure out how to do it.
It seems like the only way to change the newshapes fillcolor
property is to replace the whole figure, but then I lose all previous shapes
All and any help appreciated.
Andrew
I have just found the following demo that does exactly what I am trying to do:
https://dash-gallery.plotly.host/dash-image-annotation/
Now to unpack the logic and adapt it to my context ... Happy 2021!
Andrew
I have a series of paths (with curve points) created in Illustrator. How do I send my circle to follow along these paths in Canvas?
I can set the paths to a line through a svg -> canvas converter, but that doesn't help me animate anything along that line.
Any ideas?
I suggest checking out something like CAAT.js. The first demo does pretty much exactly what you are looking for.
CAAT.js follow path demo
We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.
I have a simple Flex paint application which let the user draw anything they want. My problem is how can I save it into MySQL database without converting it to an image format. Moreover, I want it to be save and at the same time to retrieve in case there is an unfinished drawing.
Thank you.
Define what objects can be drawn, e.g. straight lines, points, polygons with controlled corners, etc. For each object, create serialization methods. It may be binary format (I guess you won't need search drawing in database by features used): object type first, then it's attributes. For line, it would be end points, color, maybe width and drawing style (solid, striped, dotted.)
Entire drawing will have some properties too, like width/height, format version. Write those in the header, then will go all drawing objects. If you need layers, you can make special tag for them, which will act like separator between drawing objects:
header - layer 1 tag - line - line - line - layer 2 tag - square - circle
Binary format also gives ability to save drawing into file (or in database as a blob.) Also, you can go with XML, it just will use much more bytes (but will be easier to debug.)
I have been developing a software package to plot astronomical data in the form of a movie. It looks like this.
To do this, I export 100 tables of data from Java to gnuplot and use a bash script to turn them into a GIF. I want instead to do it in HTML and maybe Raphael.
I'm thinking that I can use a Python script to iterate through folders and build a hundred plots, and then cycle through them. Any ideas on this? How can I get them to cycle?
You will have to test performance issues, but FLOT might be just the thing for you...
here is an example of flot animating:
http://people.iola.dk/olau/flot/examples/realtime.html
I think a canvas is what you need. Just draw all the points, clear the canvas, and redraw
your code would look something like this pseduo code
for each frame
for each point
canvas.draw point at x, y
end
clear canvas
end
Even I was looking for something similar, I found this one link will be trying it out http://humblesoftware.com/flotr2/