I believe I have a working version of what you're looking for: http://jsfiddle.net/Gwp25/8/
You were close on the implementation. I'll explain what I changed to make it work.
First, I attached scales to the
zoom function. This is important as d3 will automatically update them as you zoom in and out. It's important to note that I did not use your identity scales. If you use an identity scale d3 zoom behavior will not update the scale. Here are the scales that I created that are identical to yours when there is no zoom:
var x_scale = d3.scale.linear().domain([0, chartWidth]).range([0, chartWidth]); var y_scale = d3.scale.linear().domain([0, chartHeight]).range([0, chartHeight]);
brush also takes scales as parameters. This is where you mistakenly put the original identity scales. So even though the graph was zoomed and panned you used the same scale to map points to the newly zoomed graph.
In order to feed the
brush the correct scales, you can access the zoom behavior's scales by calling:
Once you've done this the rest is gravy.
Note: I hacked the code a bit so I could access your zoom function in
toggleBrushing by making it a global variable. I don't recommend keeping it this way, but I didn't want to do heavy refactoring. Good luck, hope that helps!
- Zooming and brushing in d3 force directed graph
- Highlight selected node, its links, and its children in a D3 force directed graph
- Add text label to d3 node in Force directed Graph and resize on hover
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- semantic zooming of the force directed graph in d3
- Is there a tap and double tap event in d3.js force directed graph
- D3 highlight selected node, and its links to parent and ancestors in a force directed graph
- How to calculate in-degree, out-degree and weigted degree for force directed graph (d3.js)?
- Freezing force directed network graph and make draggable in D3
- Both single and double click on a node in d3 force directed graph
- How do I make a d3.js force directed graph interactive using ajax and python?
- D3v4 force directed graph - localStorage disconnects links and nodes
- Zooming to a clicked node on a D3 Force Directed Graph
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- D3js - Force directed graph - advanced highlighting of neigbour nodes and links, is it possible?
- how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph
- Highlight a node and its neighbour node in force directed graph
- How to show edges in force directed graph using d3.js and Angular?
- How can I use crossfilter to filter graph data and visualize them on a force directed graph?
- D3 force directed graph drag and zoom functions not working
- How to zoom and translate to center of force directed graph in D3
- How can I append text to and render that text from a line in a force directed graph in D3.js?
- d3.js V3 force directed graph and unlinked nodes
- Force Directed Graph with expand and collapse (d3.js)
- force directed graph - define the color of a node, if the node is source and target at the same time
- force directed graph filter nodes and links
- date time parsing and filtering for a d3.js force directed graph
- how to display the node attributes like person's name photo and address in a force directed graph
- how to implement zoom in d3 graph of force directed layout and position the nodes
- Why does d3.js v3 break my force graph when implementing zooming when v2 doesn't?
More Query from same tag
- D3.js changing Integer axis to String
- D3js - change line color based on dataset
- How to arrange rectangles in rows in d3.js
- ticks start douplicating on zooming d3js
- Append <br> using d3
- Select d3.js data element by attribute
- d3 - nested selections/sub-item update issue
- d3.js force-directed issues, significance of "d"?
- d3 Filtering data
- Using d3-tip on line graph without defined points
- D3 linear scale , how to show customised strings as ticks ?
- How do I display a diagram created with rcharts within my R shiny app?
- Grid-lines are being recreated and overlaid on each other
- Text Not Showing Over SVG Rects
- JSON keys for x axis, values for y
- Change arch width through transition with D3js
- Line charts in d3.js using d3.chart.js
- Values on the top of the bars are not moving along with the bars
- Datamaps: how to show popup on mouseover AND customize the mouseover event listener
- Get sum total for each column in d3.js
- Issue trying to build error chart in D3
- Using the selection index in looped d3.js transition
- Displaying text after an onclick event
- Callbacks with D3
- D3, Typescript - Argument of type 'this' is not assignable to parameter of type 'BaseType'
- halven d3 pie chart
- NVD3 multi bar horizontal chart x axis domain
- Tree graph, in D3.js Where does x and y property came from?
- Go back to previous children order after calling .raise()