Finally I found a solution by myself with some more articles. The main code snippets that helped (after reading a lot more things) were given by this article which was not sufficient explained for me in first instance.
So, the solution with the given example tree code is the following:
To set the initial zoom level you need to add one line to the g-element that is for the zoomlistener to work (it is pretty much on the bottom of the script) that it looks like:
// Append a group which holds all nodes and which the zoom Listener can act upon. var svgGroup = baseSvg.append("g") .attr("transform","translate(100,30)scale(.3,.3)");
I basically just add an attribute to the g-element that holds all other nodes. In this attribute is the initial zoom level set. It seems important that the translate values and the scale are the same (30/100 = 0.3 ;) ). Otherwise it doesn't work propely.
But now is the problem, that when we want to zoom or move accross the tree for the first time it jumps back to scale 1 which is not that nice for the user as he will be confused by this sudden jump.
To have a smooth user experience, I added only a small line to the above mentioned zoomlistener that it looks like this (its the same translate and scale as before):
var zoomListener = d3.behavior.zoom().translate([100,30]).scale(.3).scaleExtent([0.3, 3]).on("zoom", zoom);
Now the initial zoom level is hardcoded and easily adjustable - and the best of all: it only took two lines :D
I will try a dynamic approach. When I have a solution I'll edit this solution :)
var depth_of_tree = window.SESSION.depth_of_tree;
And the initital scale with 1 divided by the ln of the depth:
var initscale = 1 / Math.log(depth_of_tree);
Then, I change the zoomlistener with the following lines:
//var initscale = .3; var inittransx = 100; var inittransy = inittransx*initscale; // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents var zoomListener = d3.behavior.zoom().translate([inittransx,inittransy]).scale(initscale).scaleExtent([0.3, 2]).on("zoom", zoom);
// Append a group which holds all nodes and which the zoom Listener can act upon. var svgGroup = baseSvg.append("g") .attr("transform","translate("+inittransx+","+inittransy+")scale("+initscale+","+initscale+")");
This results in pretty nice scales no matter how deep the tree is. (you may have to play a bit with the numbers)
- set initial zoom level at d3.js tree (dynamically)
- D3.js Set initial zoom level
- Set initial d3 zoom based on boundary dynamically - V4
- How do I specify the initial zoom level in D3?
- D3 V4 setting initial zoom level
- How to set an initially determined zoom level based on data d3js
- D3.js scale initial zoom level
- networkD3 in R -> Set Initial Zoom in forceNetwork()
- d3 time scale setting initial zoom level and domain
- d3 zoom - how to set initial transform
- d3.js how to dynamically add nodes to a tree
- Dynamically resize the d3 tree layout based on number of childnodes
- how to know the current Zoom level in D3.js
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- D3 manually zoom,how to set the translate for zoom
- Precalculate and set initial positions of nodes in D3.js
- Can I use zoom.translateBy to set an initial pan?
- d3 limit zoom level for time axis
- How can I set an initial .focus() on a node in a d3.js sunburst chart?
- How to set color of D3 Zoom Packed Circle children
- D3 Collapsible Tree only drag without zoom and jump and scroll
- Calculating Mercator d3 scaling to match Leaflet zoom level
- D3 initial zoom behavior breaks
- How to set the zoom factor in D3.js v.4.x?
- Matching leaflet zoom level with d3 geo scale
- d3.js area graph with initial zoom
- Set inital zoom using brush in D3
- How to dynamically reposition binary tree nodes visually
- Changing zoom level of d3 SVG canvas?
More Query from same tag
- d3 pie chart with link in tooltip
- AngularJs update function with <select> <option> is not working
- D3 Chart is not displaying
- How can I change the sort order of a D3 ordinal scale?
- D3 mouse release event
- d3.js v4.9 Get the calculated width of selected element
- SVG expand line verticaly
- Control what elements get shown in dc.js datatable
- Showing Percentages in dc.js Row Charts
- D3 week of the year error?
- How to access JSON using d3.js
- D3.js (Wilkinson type) Dot Plot Example
- Updating data in D3 stacked bar graph
- Is it possible to display a d3 chart using the mouseover element of another d3 chart
- how to draw a grid incrementally in d3?
- d3 break line graph if no data
- D3 Scatterplot with thousands of data points
- Working D3 And Crossfilter for generating graph
- NVD3 Chart responsive issue
- D3 fade function Circle Graph
- D3 Multi-Series Line Chart with ZOOM
- Legend is not appending
- Canceling Mouseover on Newly Created DOM elements in D3
- How to add a tooltip to an svg graphic?
- d3 axis rendering outside the SVG
- D3.js various link distance
- D3 V4 Basic example not working
- Same repeatable string values using a band scale
- d3js get <path d="NaN"> when splitting my code in object