score:1
your transitions are trouncing each other.
if you look at the source code to the examples here, you'll notice this curious line in the tick function:
function tick() {
transition = transition.each(function() {
...
according to docs:
if type is not specified, behaves similarly to selection.each: immediately invokes the specified function for each element in the current transition, passing in the current datum d and index i, with the this context of the current dom element. any transitions created within the scope of transition.each will inherit transition parameters from the parent transition, including id, delay, duration and easing. thus, transitions created within a transition.each will not interrupt the parent transition, similar to subtransitions.
the transition.each method can be used to chain transitions and apply shared timing across a set of transitions.
[bolding mine]
applying this to your example, seems to fix your issue.
note, i had to change your paths
variable. after i wrapped up the transitions, it was no longer a smooth transition when contained in the outer g
element.
Source: stackoverflow.com
Related Query
- How to fix viz that is getting out of sync when I change browser tabs?
- How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?
- How to show full text when zoom in & truncate it when zoom out
- D3 - How to update force simulation when data values change
- How to fix ".join is not a function" when trying join after selectAll?
- How to keep the duplicate letters in enter() when update() already have that letter in D3
- How to change table cell color based on numeric value from .csv report AND when tables are dynamically created?
- D3.js: How to keep marker and text on same position when zooming in and out
- How do I change color of path element when its value is selected from dropdown
- How to change d3.js text entry from within that text's onclick method?
- How to fix d3 parsing error when using function and return value to set "d"?
- d3 circlepacking how to not zoom out when clicking the same node twice
- How to change properties of elements in a SVG when I mouseover an element of a second SVG using D3
- D3.js how to write pop-out box that appears when the user clicks on an element
- How to change the data that appear on the axis using D3.js
- How do I take into account scale when getting height/width of a d3 element using bounding rectangle
- How to fix d3.js axis mis match when using clip paths for linear filtered line charts
- D3 force layout binding by reference getting out of sync
- How can I add a delay between function calls that change data in d3.js?
- How to make the cursor change in d3.js when I want?
- I don't know how to change a color in a d3.js US map when hovered over
- How to fix the configuration of the nodes that are returned? (D3, Javascript, Neo4j)
- How can I fix my chart so that the scale of the x axis is defined by a group of labels?
- How can I (in D3) make a rectangle change its size while staying fix in one point?
- How to fix graph so it doesn't write over itself when resizing
- How to fix SVG path masking problem when too many parts of path are cut off when a mask is applied
- How to setup svg to change position when resizing the window?
- How to handle browser quirks when positioning SVG elements
- How to change calculation on nv3d when switching to stacked?
- How can I change the white space between spans when adding them programmatically?
More Query from same tag
- Apply zoom to tooltip in D3 tree
- Show values of non-selected paths in tooltip for d3 stacked area charts?
- Generating visually pleasing circle pack
- How to align text vertically on a node within a Sankey diagram (D3.JS)?
- Scale of chart generated by using dc.js is returning NaN
- Using D3 Zoomable Tree Map Code as a Template
- Safari 5 on Windows 8 inverts all text-elements on SVG
- D3 Map - Marks Zooming
- Nested plot and line graph in d3
- JSON and changing datasets
- d3.js & NVD3 axisLabel with a £ (pound) symbol
- Horizontal bar chart d3.js not showing label
- D3.js data structure for split frame donut charts
- d3.js - Dendrogram display adjusted to the tree diagram
- Set domain on ordinal scale from tsv data
- Behavior of chaining syntax in axes generation
- Concentric circles in d3 force graph
- How to Call a Function From a JSON Array
- How to display discontinuous line chart
- How I can hide the root element in a dendogram d3
- How to walk a tree in d3.js
- how to enforce some spacing between the elements of 'addCategoryAxis'
- How does each function and this keyword work together in d3?[chaining transitions]
- Count how many occurrences of a word are there in CSV file
- dc.js not displaying the y-axis
- Date Sorting with d3.js
- d3 tree - Limit number of nodes returned from search
- d3.js ordinal scale returns a wrong value
- How to Draw rectangles at 0,45,90,135,180 degree so on around an SVG Circle with D3.js
- D3JS makes date duplicates