The problem is with the d3 selector use for selecting labels. As you need two separate force layout diagrams, you should use a selector as shown below for labels.
var nodes_text = svg.append('g') //Append new group for labels in new diagram .attr("class", "labels") .selectAll(".nodetext") .data(nodes) .enter() .append("text");
Updated Fiddle: https://jsfiddle.net/gilsha/qe7bbnwn/1/
- Multiple force-directed graphs in 1 svg (problems with text display)
- Appending multiple svg text with d3
- How to have a text label on links in d3 force directed graphs
- I'm having trouble getting multiple isotype graphs on one page. I think the problem may be with the svg <use> element .selectAll("use")
- D3 Multiple Force Directed Graphs
- Display text over entire d3 force directed layout
- SVG foreignObject contents do not display unless plain text
- D3 force directed layout with bounding box
- 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
- Changing number displayed as svg text gradually, with D3 transition
- Labels / text on the nodes of a D3 force directed graph
- Constructing Force Directed Graphs From Only Link Data
- How to display a text when mouseover a node in D3 force layout
- Multiple force-layout graphs with d3 in seperate svg/div's
- d3js (v4) canvas force layout with text on nodes
- How to create slow simultaneous transitions of multiple attributes in force directed graphs?
- d3.js Force Directed Tree with Labels
- Dynamically generating multiple d3 svg graphs
- Possible to use SVG markup with a force in D3?
- How to add text in the center of node in force directed graph?
- d3 force directed graph remove text cursor
- Collapsible D3 force directed graph with non-tree data
- How to use D3 force layout with existing SVG elements as nodes
- D3 v4 force directed graph with rectangles
- SVG text alignment issues with a curved textpath
- D3 force directed graph moving text
- SVG text color with correspond to background
- d3 force directed graph don't select text
- Avoid jumping of an SVG Text with text-anchor while dragging
More Query from same tag
- "TypeError: undefined is not an object" when using .attr() to add data attribute
- issue with d3 projection albers producing checkered map
- Reload TSV File Without Refreshing Page
- hexbin centers for non empty hexagons
- How to create speedometer in D3JS?
- How to add a rectangle to specified axis in D3
- Load JSON in d3.js to draw scatterplot
- Embed D3 + HTML with Dash Components
- Tooltip in the network graph is flashing on and off
- Display missing ticks on y axis
- nvd3 angular-nvd3 d3 Displaying chart legend vertically
- d3 transitions stop working after timer ends
- d3.js tooltip display "[object Promise]" instead of value
- D3js and React regarding DOM manipulations
- d3 join on object key within array
- Updating data in the enter().append() block d3.js
- Hide the lines of the municipalities in a map using d3.js
- d3-sankey display by groups and drag doesn't work
- Node.js jsdom/express response cache?
- Coordinates of each center's arc in a pie chart
- How to get an non-overlapped circle packing d3 js chart?
- d3 importing data from mysql database return "undefined"
- d3: My paths seem to be doubling up and I can't figure out why
- Tooltip not working nor displaying on D3 scatter plot
- Uncaught TypeError: Cannot read property 'textContent' of null error
- Different gradient for every area
- d3 donut chart with labels
- D3.js focus + context via brushing
- d3 forced graph - hide inherited links
- Create a d3.js histogram based on already given frequencies