how can i space the Collapsible tree nodes in circles going around the root node?Example of picture below.second image what i currently have now.
i know it has something to do with the X and Y position in this method.But i just can't figure out how.
original code i got it from Original code here
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
debugger
// Normalize for fixed-depth.
nodes.forEach(function (d) {
//i know i have to do something here
d.y = d.depth * 180;
});
// Transition to the proper position for the node
//then it will update the transform and translate
enter code here
nodeUpdate.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
solved.this is my outcome.
instead of using translate for my rotating.i use rotate class with transform.
Related
I imported a svg in PaperJS and let it move along a path.
As it moves along the path, I calculate the rotation to let it follow the path with the right rotation.
Now I need a point that is offset from the svg.
Please have a look at this image for a better understanding of what I need:
https://imgur.com/Lyua7oW
I already found it out. If anyone is interested here is the answer:
Add the two points together (offset points of normal and tangent) then add the point of the svg.
var normal = this.strecke.getNormalAt(offset)
var normalOffset = normal.multiply(Math.random() * (this.bubbleOffsetX - (-1)*this.bubbleOffsetX + 1) + (-1)*this.bubbleOffsetX)
var tanOffset = tangent.multiply(this.bubbleOffsetY)
var bubblePosition = normalOffset.add(tanOffset).add(point)
var bubble = new Path.Circle({
center: bubblePosition,
radius: Math.floor(Math.random() * (this.bubbleMaxSize - this.bubbleMinSize + 1) + this.bubbleMinSize),
fillColor: '#A4F2FB',
opacity: Math.random > 50 ? .5 : .3,
})
setTimeout(() => {
bubble.remove()
}, this.bubbleLifespan);
I was following the Google-maps overlay example and have modified it to fit my needs. This is my new draw prototype for USGSOverlay:
USGSOverlay.prototype.draw = function()
{
//need to use projection to get image position from latLng to Px
var overlayProjection = this.getProjection();
var mapPos = new google.maps.LatLng(this.y_, this.x_);
var posInPx = overlayProjection.fromLatLngToDivPixel(mapPos);
//calculate the size in current zoom
//imageScaleFactor is a global variable placed on top in document
var dx = Math.abs(this.img_.naturalWidth * Math.pow(2, map.getZoom()) * imageScaleFactor);
var dy = (dx / this.img_.naturalWidth) * this.img_.naturalHeight;
// Resize the image's div to fit the indicated dimensions.
//places the image so that the given input (x_, y_) is in the center
var div = this.div_;
div.style.left = posInPx.x - dx / 2 + 'px';
div.style.top = posInPx.y - dy / 2 + 'px';
div.style.width = dx + 'px';
div.style.height = dy + 'px';
};
When I load the page for the first time my overlays would not appear until I translated the map for a long enough distance or zoomed in/out.
The problem is that I the operations this.img_.naturalWidth and this.img_.naturalHeight was taking too long and didn't give a value in time for the map to be initiated where I assume it runs the draw function for each overlay once.
My solution was to add a listener for the image in the onAdd prototype for USGSOverlay:
var thisOverlay = this;
//draw country when image is finished loading
this.img_.onload = function(e){
thisOverlay.draw();
}
This will call the draw function of the overlay once it's image is loaded.
The thisOverlay variable is needed because the object itself cannot be accessed from the onload function as far as I can tell.
how to select and rotate the texts of the x axis only !
In this Example :
http://dc-js.github.io/dc.js/examples/heat.html
So select from 1 to 20 and rotate them !
I tried this way :
chart
.selectAll("g.cols.axis > text")
.attr("text-anchor", "middle")
.attr("transform", function () {
return "rotate(-20)"
})
.style("fill", "blue");
but it seems that I'am selecting the whole X-axis and not every text separatly .
The fill style works fine but the transformation does not work properly and the axe is entirely rotated.
You must rotate each text element on X Axis around its own center. To do that you must specified the rotation angle AND the center of rotation
rotate(angle centerX centerY)
With that on mind, you can do:
chart.selectAll('g.cols.axis > text')
.attr('transform', function (d) {
var coord = this.getBBox();
var x = coord.x + (coord.width/2),
y = coord.y + (coord.height/2);
return "rotate(-20 "+x+" "+y+")"
});
Remember do it after call to chart.render(); or your selection will be empty
If you want understand why this, take a look at: https://sarasoueidan.com/blog/svg-transformations/
Here the working code
Is something like this what you're looking for?
.cols.axis text{
transform-origin: center;
transform: rotateX(-20deg);
}
I'm not sure if that's the axis you wanna rotate on since it just moves them up over the chart - but for any axis you can just use rotateX/Y/Z!
when I merge boundary colours of 2 Map Levels (Department and Arrondissment) , the mouse hover done wrong for 2nd Layer (Arrondissment)
My Bug on Arrondissment Layer is like this
Hovering should be done like
For merging the Border color , I Applied the following logic on Arrondissment Tab :
1.Draw Arrondissment coordinates drawn
2.Draw Department coordinates after them (like superimpose)
Make the Department Transparent (reduce the opacity)
this procedure mix the border well, but the Hover on does still as per Department level .
this is svg vector Map and Each map piece is made up of coordinates
Code is complex and lengthy for Creation of Map , thats why I dont think can post all of it
this is the Main function which creates Bundary and add color to each piece Map
//path
for (var obj in mapObj.paths) {
var rObj = R.path(pathData[mapObj.paths[obj].path]).attr(attr);
//if url found the assign
if(mapObj.paths[obj].url !=null){
//rObj.attr({"href":mapObj.paths[obj].url});
if(mapObj.paths[obj].url.indexOf("alert") > 0){
rObj.attr({"href":mapObj.paths[obj].url});
}
else{
rObj.dblclick(function(e){
loadMap(this.data("qStr"));
});
rObj.click(function(e){
showPopup(this,currX,currY);
loadExternalData();
});
}
}
else{
rObj.click(function(e){
showPopup(this,currX,currY);
});
}
rObj.data("qStr", mapObj.paths[obj].url);
rObj.data("key", mapObj.paths[obj].key);
rObj.data("mType", mapObj.paths[obj].mType);
rObj.data("type", mapObj.paths[obj].type);
rObj.data("sTitle", mapObj.paths[obj].title);
rObj.data("name", mapObj.name);
rObj.data("showhide", "show");
rObj.data("zoom", mapObj.zoom);
rObj.data("parentId", mapObj.parentId);
rObj.data("title", mapObj.title);
rObj.color = Raphael.getColor();
rObj.data("hoverFill", "#3e5f43");
rObj.data("fill", "#fff");
rObj.data("childId", mapObj.paths[obj].key);
if(mapObj.paths[obj].cName=="city"){
rObj.data("className",mapObj.paths[obj].cName);
rObj[0].setAttribute('class', mapObj.paths[obj].cName);
}
else
{
rObj.data("className", mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
rObj[0].setAttribute('class', mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
}
rObj.hover(animateOver, animateOut);
rObj[0].id = mapObj.paths[obj].key;
rObj[0].style.cursor = "pointer";
rObj[0].setAttribute('title', mapObj.cName);
rObj[0].setAttribute('data-toggle', "tooltip");
rObj[0].setAttribute('data-placement', "left");
if (mapObj.zoom == 1) {
var box = rObj.getBBox();
var currPaperPosition = panZoom.getCurrentPosition();
var currPaperZoom = panZoom.getCurrentZoom();
var currHeight = R.height * (1 - currPaperZoom * 0.1);
rObj.animate({
transform: "t" + xdif + "," + ydif + "s" + mapZoom
}, 100);
}
}
}
I Just need to place hover property of lower layer on upper layer .Can this thing be done by Css and any other technique ?
In google maps or in the component you use for managing event check if the z-index of the Department is more high of that related to Arrondissment .. otherwise the mouse hover event in managed form the wrong polygon .. if you need you can change dinamically by setOption or a similar based on your need ..
yourPolygonObj.setOptions({ zIndex: 200 });
I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message.
I have the code:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
So the div appears in the location where I clicked i.e. at the location of the marker.
Now if I drag the map the markers move along with the map but the div remains at the same location.
How can I change the style of div with drag event so that the div also moves along with marker?
I was trying the following code in the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
But it still shows the same pixel position as previous time.
You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...
var startCoords;
var startLat;
var startLng;
var movedCoords;
var shiftLat;
var shiftLng;
map.on('dragstart', function() {
startCoords = map.getCenter();
startLat = startCoords.lat;
startLng = startCoords.lng;
console.log("STARTED FROM: " + startLat + "," +startLng);
});
map.on('drag', function() {
movedCoords = map.getCenter();
shiftLat = startLat - movedCoords.lat;
shiftLng = startLng - movedCoords.lng;
console.log("Shifted: " + shiftLat + "," + shiftLng);
//apply shift to custom div here...
});