I want to create multiple mxWindows in the mxGraph javascript library.
All vertices I create seem to appear in the last mxWindow I created, even if I create the vertices before the second mxWindow is created.
Which parent should I use? System does not accept mxWindow objects as parent.
Using graph.getDefaultParent does not help, as it always seem to return the same parent that is associated with the most recent mxWindow.
How can I specify a separate parent for each mxWindow?
Any example code creating a vertex in one mxWindow and another vertex in another mxWindow?
Thanks
Seems like I need to create a second top element
<div id="graphContainer1"
style "overflow:auto;position:abolute;width:100%;height:100%;..."
</div>
<div id="graphContainer2"
style "overflow:auto;position:abolute;width:100%;height:100%;..."
</div>
and create a separate graph object for each container.
container2 = document.getElementById('graphContainer2');
graph2 = new mxGraph(container2);
..
window2 = new mxWindow('second window', container2, x, y, w, h, true, true);
..
Related
I have a question about the coordinates of the model.
Would it be possible to register a problem with a tag in the model, defining the exact location by clicking on the model?
enter image description here
PS.: on this example, only it is possible to use central coordinates of the object
To get the exact x,y,z value, use this 'ALT-key pivot point' technique, to get the surface point of a model, instead of it's centroid:
https://github.com/wallabyway/markupExt/issues/2
Second part:
Once you have the x,y,z value, you can replace 'centroid' position calulation, in this post:
https://forge.autodesk.com/blog/placing-custom-markup-dbid
// get the center of the dbId (based on its fragIds bounding boxes)
const pos = this.viewer.worldToClient(this.getModifiedWorldBoundingBox(id).center());
Does that help?
I made a choropleth map of Chicago's 77 neighborhoods in D3.
The only challenge is, it's hard to know which neighborhood is which.
So, what I did was make divs with p elements (containing the neighborhood names) in the body of my HTML file and positioned them into a blank spot in my svg/canvas.
See a visual here.
What I'm trying to do is make it so when you hover over the name, the geographic boundary of the neighborhood highlights. Somehow I need to relate the geography to the text, but I have no idea how.
For a more robust solution, you would ideally want to add an id field to your data. This assumes that your data is some format (such as JSON). You may already have a unique identifier that you can use instead, but if not the following should work.
var i = 0;
for (var x in dataSet)
dataSet[x].id = ++i; //Or i++ for zero-based indexing
Now it depends on how you are generating the svg elements, but ideally you are using the enter function of d3. In that case, just create the result of enter as a variable and use it to append both the path (map portion) as well as the text.
var dataSelect = svg.selectAll(".item").data(data.items);
var dataEnter = dataSelect.enter();
dataEnter.append("path").....
dataEnter.append("text").....text(function(d){return d.label;}) //Using text because this is drawn inside the SVG.
With using the data and enter functions, the created objects automatically have the id data bound to them.
This makes it a simple case of text.id == path.id in your mouseover function.
svg.selectAll(".itemText").on("mouseover", function(textItem){
svg.selectAll(".item").each(function (cityItem){
if (cityItem.id == textItem.id)
d3.select(this).style("fill", "green");
else
d3.select(this).style("fill", function(d){return d.color;});
})
});
I've done this in a fiddle which you can see here
Note that this does not use p elements because ideally, if you're using SVG then you probably should use text elements. If you have to use p elements, then you can still use this general technique, but instead using p.text() as the matching factor on mouseover instead of id, assuming that the name is bound to your path data somewhere.
I took an intro level flash course in college this semester and our final task was to make a mini-flash game.
I had to make a pipe-dream type game where there are a number of levels, and in each level you have to align the pipes so that the water flows and then you can pass to the next level.
I successfully made the first level, but upon making the second level,
where I placed a lot of curved pipes (by curved pipes I mean the attached image: ![Curved Pipe]: (http://imgur.com/mwpXAMn) )
I discovered that the method I use to decide when a level is complete is not working properly.
I was using HitTestObject, basically, I was testing whether 2 objects, Pipe_1, and Pipe_2, were intersecting. If all pipes intersected in the correct way, then procession to the next level is granted.
The problem with this I discovered is that flash has bounding boxes for movie clips you make, and that HitestObject uses bounding boxes to test for hits. Therefore, when you rotate a leftpipe so that it does not touch a straight pipe on screen, the bounding boxes still touch and it returns "collision" when in fact it is not actually touching on screen.
I looked up and found that you can use HitTestPoint but I can't figure out how to somehow make dynamic variables (that change upon rotation of object) that store one or two specific points on the leftpipe, say the two ends of it.
Once If I figure out how to get these values into a variable correctly, then I can figure out how to do HitTestpoint.
Also, I know of the LocaltoGlobal function but no matter what I try it keeps coming up with:
"Scene 1, Layer 'Layer 1', Frame 1, Line 30 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.geom:Point."
meaning I don't know the correct code to store an x and a y coordinate as dynamic variables.
edit: ok since a person asked, I hunted this piece of code off the web and this is the one I was trying to play around with but to no avail:
How to use HitTest for 2 rectangles, r1 is rectangle 1 r2 is rectangle 2.
var r1width:Number = 135.0; //width of retangle 1 whith rotation 0
var r2width:Number = 93.0; //width of retangle 2 whith rotation 0
var p1:Object = {x:(r1width/2), y:(r1width/2)};
var p2:Object = {x:(-r1width/2), y:(r1width/2)};
var p3:Object = {x:(-r1width/2), y:(-r1width/2)};
var p4:Object = {x:(r1width/2), y:(-r1width/2)};
r1.localToGlobal(p1);
r1.localToGlobal(p2);
r1.localToGlobal(p3);
r1.localToGlobal(p4);
var p5:Object = {x:(r2width/2), y:(r2width/2)};
var p6:Object = {x:(-r2width/2), y:(r2width/2)};
var p7:Object = {x:(-r2width/2), y:(-r2width/2)};
var p8:Object = {x:(r2width/2), y:(-r2width/2)};
r2.localToGlobal(p5);
r2.localToGlobal(p6);
r2.localToGlobal(p7);
r2.localToGlobal(p8);
if((r2.hitTest(p1.x, p1.y, true))||(r2.hitTest(p2.x, p2.y, true))||(r2.hitTest(p3.x,
p3.y, true))||(r2.hitTest(p4.x, p4.y, true)))
{
trace('collision');
}
if((r1.hitTest(p5.x, p5.y, true))||(r1.hitTest(p6.x, p6.y, true))||(r1.hitTest(p7.x,
p7.y, true))||(r1.hitTest(p8.x, p8.y, true)))
{
trace('collision');
}
I did not write this code and it does not work. I'm not sure what "Object" is because I've never used it before, I'm assuming in this case it's sort of acting like a coordinate pair.
Also, this code is to hittest 2 rectangles, whereas I'm using an L-shaped pipe, so the x/y calculation would be quite different I imagine.
This code above gives the same error that I posted before:
Implicit coercion of a value with static type Object to a possibly unrelated type flash.geom:Point.
and it gives it first on line r1.localToGlobal(p1);
Instead of using Object, you need to use Point like so:
var p1:Point = new Point(r1width/2, r1width/2);
I need to get the coordinates of a MovieClip according to another nested MovieClip in Actionscript 3.
Here's the context of MovieClip1:
Stage > Container > MovieClip1
Here's the context of MovieClip2:
Stage > Container > OtherMovieClip > MovieClip2
I'm trying to get the coordinates (X, Y) of MovieClip1 according to MovieClip2. For example, once I get the coordinates, I could set the X and Y of another MovieClip inside MovieClip2 so that it would be at the same coordinates as MovieClip1.
I've tried working with localToGlobal and globalToLocal but I can't get the result that I am trying to achieve.
EDIT:
Here's the code I've tried:
var localPoint:Point = new Point(MovieClip1.x, MovieClip1.y);
var globalPoint:Point = MovieClip2.localToGlobal(localPoint);
var containerLocalPoint:Point = Container.globalToLocal(globalPoint);
I'm not sure if I am understanding you correctly, but here's what I think you want to do :
Get the global location of MovieClip1 using localToGlobal.
Convert that global location to a local location within MovieClip2 using globalToLocal.
Use that location to set the x,y of your 3rd clip inside MovieClip2
I could code this out for you, but I think you are best helped by examining the logic of this solution and utilizing that to solve your problem.
If the logic is not the problem, then the question is really "How do I use localToGlobal and/or globalToLocal ?", which has surely been answered on this site, so a quick search can help you with the details.
I would like to combine two datasets on a map in D3.js.
For example:
1st dataset: spatial data in .json.
2nd dataset: Data to the areas in .csv
--> When you hover on the map a tooltip should show a sentences with some data from the 2nd dataset.
I am able to make the map and show a tooltip with data within the .json-file, but how do I insert the 2nd dataset?
A new function within my function that creates the map?
Do I have to take a completely new way?
Should I merge the .json-file with my 2nd dataset before using d3.js?
I appreciate any thoughts! :)
So, I think what you're asking is how to take spatial data from json and join it with some csv data that is loaded separately?
I did something similar with a choropleth map I was drawing and basically I just created a map of topology element ids to data objects and then I did a lookup using the topology element id to get whatever I wanted to associate with the actual drawn map element (I was using this method to set the color for the choropleth based on the fips country code).
So basically, draw the map so that you have an id associated with each map element that you want to be able to hover over. Then, in your mouseover/mouseout handlers, you will use that id to lookup the data you want to show in the tooltip and either use the svg title element or tipsy or manually draw an svg text element or whatever to show the tooltip.
Here's a couple useful references for drawing tooltips:
https://gist.github.com/biovisualize/1016860
http://jsfiddle.net/reblace/6FkBd/2/
From the fiddle:
function mouseover(d) {
d3.select(this).append("text")
.attr("class", "hover")
.attr('transform', function(d){
return 'translate(5, -10)';
})
.text(d.name + ": " + d.id);
}
// Toggle children on click.
function mouseout(d) {
d3.select(this).select("text.hover").remove();
}
Basically, it's appending an SVG text element and offsetting it from the position of the element being hovered over.
And here's a sample of how I look up data in an external map:
// Update the bound data
data.svg.selectAll("g.map path").transition().duration(750)
.style("fill", function(d) {
// Get the feature data from the mapData using the feature code
var val = mapData[d.properties.code];
// Return the colorScale value for the state's value
return (val !== undefined)? data.settings.colorScale(val) : undefined;
});
If your data is static, you can join it into your topojson file (if that's what you're using). https://github.com/mbostock/topojson/wiki/Command-Line-Reference
The client could change my data, so I kept it separate and redrew the map each time the data changed so that the colors would update. Since my data was topojson, I could access the feature id from the map data using d.properties.code (because I had joined the codes into the topojson file using the topojson tool I reference above... but you could use whatever unique id is in the spatial data file you have).