How can I change the position of the legend, where the legend being on the right most side, I can make it move to the left most side? I tried to do some changes in the nvd3.js code, but that hasn't worked for me at all!. I'm sure how and where can i add attributes to change the position?
Just for info, here is the legend (Key Usage', 'block Usage','other usage') whose position im trying to change:
Any ideasss? Thanks!
Absolutely right about the rightAlign Property and good news is we can set it in the addGraph function as follows:
chart.legend.rightAlign(false);
From the source code comment line 5005 in nv.d3.js:
//position legend as far right as possible within the total width
if (rightAlign) {
g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
}
else {
g.attr('transform', 'translate(0' + ',' + margin.top + ')');
}
So I guess you can not positioning the legend to left side:)
The code is designed to put the legend as far right as possible, it also contains some wrapping logic, once the length of legends in one line reach some max limit(like reach the chart's width), it will separate into two lines in well format.
Hope it helps!
Related
I am working on a d3.js chart - This current model creates a legend segment as a g element. I'd like to ensure the legend stacks below if there is not enough room in the container.
//desktop - ample space
//mobile - not enough space
I've cleaned up the legend part -- you able to clean up the code base and add some more comments here. One of the old features I had - is if there wasn't enough room in the chart the legend stacks underneath - like responsive design - I used to create 2 svg parts but apparently with d3 it should only be 1 svg - http://jsfiddle.net/h066yn5u/13/
see if the chart can be more dynamic with different sizes - I think I had to add a padding of 10 to the radius to give it a little gap between the edges.. maybe though its a case of adding a transform on the svg itself to add that padding
var arcchart = chart.append("g")
.attr("class", "starchart")
.attr("transform", "translate("+(r+10)+"," + h / 2 + ")");
var legend = chart.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + ((r + 10) * 2) + "," + (h / 4) + ")");
a version where it splits the chart into two svgs
http://jsfiddle.net/h066yn5u/14/
There are multiple ways to solve this issue.
Split into 2 svg containers: d3.js is not bound to just one svg container. You can split up the legend and the chart into 2 seperate svg containers and let the HTML handle the flow of the page
Use foreignObject: If you don't want to do that. You can try to use tag. Remember, that this is not supported by ie11 (and edge either afaik)
Calculate everything by hand: calculate the width of your legend (and including text), the width of the chart and get the available width for your whole container. If the whole container width is too small, push the legend below and of course adjust the svg height and width accordingly.
I recently took up D3 for a project, and i am facing an issue with the tree layout. When i initially load the tree layout it stays nicely within the SVG, as seen on the screenshot below.
However, once i start opening the nodes, the more nodes i open, the more start going up and thus become invisible, as seen on the images below.
When i start opening nodes:
When all nodes are opened:
As you can see i have made the svg scrollable vertically so that i can see bigger trees.
Here is how i create the tree layout:
var tree = d3.layout.tree()
.nodeSize([55,30]);
Right now I found a solution by increasing the height of the 'g' element which holds all the nodes every time i click on a node that has children, but it is not a good solution because this causes the whole tree to "jump" every time this happens.
//creates the <g> element
var gWidth = 90;
var gHeight = 250;
var vis = svg.append("g")
.attr('id', 'group')
.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
function updateSvg(node){
//moves the g element 50px down on each click that has a child
if(node.children){
gHeight +=50;
vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
}
else{
gHeight-=50;
vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
// }
}
I am also increasing the SVG height if there are more than a certain amount of nodes, but i think this is out of scope for my current issue.
Is there something I am missing?
I can see two ways of trying to solve this:
1. Scroll your container automatically to avoid the jump, in your solution with the gHeight variable:
document.getElementById("container").scrollTop += 50;
I am really not sure of this, though, so I think you'll do better with:
2. Use d3 zoom & pan methods The zoom behavior works pretty well, see
https://github.com/mbostock/d3/wiki/Zoom-Behavior
It boils down to
var zoom = d3.behavior.zoom();
svg.call(zoom);
and so you can get rid of the scrollbars and gHeights, and basically don't have to worry anymore about the window boundaries.
There is a question here
d3.js: pan with limits
Answering the question to limiting the pan movement. But this uses axis, which I do not have.
What I have is a force directed graph which has the ability to pan and zoom.
Now I have put a limit on the zoom using :
.call(d3.behavior.zoom().on("zoom", redraw).scaleExtent([0.8, 2]))
I am wondering how do I go about limiting the pan movement of this graph so i dont drag the network/graph outside of the viewport.
(The network may change size depending on the JSON file imported, so I can't use exact figures)
inner.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
There is no equivalent zoom.extent. You can override zoom's translate with mins and maxes inside your redraw function, though. For instance, if you wanted to limit zoom to stay within 500px of its original position:
function redraw() {
var oldT = yourZoom.translate()
var newT = [0,0]
newT[0] = Math.max(-500,oldT[0]);
newT[0] = Math.min(500,oldT[0]);
newT[1] = Math.max(-500,oldT[0]);
newT[1] = Math.min(500,oldT[0]);
yourZoom.translate(newT);
//The rest of your redraw function, now using the updated translate on your zoom
}
My question concerns this example:
http://bl.ocks.org/mbostock/4699541
And this bit of code:
var b = path.bounds(d);
g.transition().duration(750).attr("transform",
"translate(" + projection.translate() + ")"
+ "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
+ "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
What if there were text labels on the states? How would I handle text when zooming in and out of the states? I'd want to do it in a way that would keep the label the same size and still centered on the state. Here's what I've tried:
Tansforming/scaling the text along with the shapes. The text basically stays in its original position; it doesn't seem to scale and tansform the same way the shapes do.
Putting the text and states into a group together, then applying the transform/scale on the whole group. This just makes the text scale with the state -- so on zoom in, the text becomes huge. Etc.
Reprojecting. It works fine but it is way too expensive.
Removing the text and then reapplying it after the transition. This seems to just reapply the text at the same size, because it's applying with the same projection.
Any ideas? Any notes on things I might be missing? Thanks!
I use dagre and d3 to display graphs. The graph elements and the viewport can be dragged, and zoomed. After dragging/zooming the viewport whenever I redraw the graph (or draw another graph) the viewport stays where it was set previously, but resets on first interaction (jumps to [0,0], and default zoom ratio).
How to reset position of the viewport in d3 with function call?
Dagre author here - are you using the dagre demo or is this custom code? If you're using the dagre demo, I can confirm the behavior you're observing and the fix is to add this line:
svgGroup.attr("transform", "translate(5, 5)");
before this code block (dagre/demo.js, line 252 in my tree):
svg.call(d3.behavior.zoom().on("zoom", function redraw() {
svgGroup.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}));
I've updated the demo in the source code under this ticket: https://github.com/cpettitt/dagre/issues/56
Thanks!