score:7
Accepted answer
actually this seems to working (just added and svg
element and centered the nodes)
edit
for v4 you need to merge selections, see below:
var nodes = [{
"oe": 1,
"name": 'test'
}, {
"oe": 1,
"name": 'test2'
}, {
"oe": 0,
"name": 'test3'
}]
//join
var nodegroups = d3.select('svg').append('g')
.attr('transform', 'translate(50, 50)')
.selectall('g.nodegroup').data(nodes);
//enter
var nodegroupsenter = nodegroups.enter().append('g').attr("class", "nodegroup");
nodegroupsenter.append("circle");
nodegroupsenter.append("text");
//update
nodegroups.merge(nodegroupsenter).select("circle")
.attr("r", 4)
.attr("class", function(d) {
return ((d.oe) ? " oe" : "");
});
nodegroups.merge(nodegroupsenter).select("text")
.text(function(d) {
return d.name;
})
.attr("text-anchor", "top")
.attr("y", 10)
.attr("dy", -15);
//exit
nodegroups.exit().remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<svg width="100" height="100"></svg>
Source: stackoverflow.com
Related Query
- D3 (v4): update pattern multiple elements in group
- D3: update data with multiple elements in a group
- D3 - v5 update pattern on multiple text elements
- D3 V4 Transition on entering elements using General Update Pattern with merge
- How to update multiple elements for each data
- A more elegant way to bind new elements using data bound to multiple group elements
- d3 drag multiple text elements inside a group SVG
- How to use brush to select circles that are contained in multiple group elements in D3.js?
- Appending multiple non-nested elements for each data member with D3.js
- How to update elements of D3 force layout when the underlying data changes
- How to update the fill color on existing svg elements with d3.js?
- How to update elements of an HTML that the elements are created using data from a CSV file?
- Add single parent node by selecting multiple elements in D3
- How to group by multiple keys at the same time using D3?
- How to move elements along with svg group
- d3 monthly data set - update data- add new group
- How can I make convex hulls of multiple group network nodes in D3.js
- D3.js: how to follow general update pattern to transition nested elements?
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- In D3, how can I create multiple elements for each data element based on value in data?
- D3 animate marker along multiple paths with d3 nest group
- d3 update selections: How does d3 decide which existing html elements to capture for its own use?
- generate clipPaths for multiple elements in d3.js
- Get mean of all elements at a given index across multiple arrays
- Append multiple 'text' elements in d3
- Appending multiple elements in D3
- d3.js update pattern not working as expected
- d3.js: reusable clipPath for multiple svg:text elements
- Not understanding d3 v4 new general update pattern in nested data
- How to group multiple values in nested D3 to create multiple rollup sum chart ?
More Query from same tag
- Remove outline along the axes in d3.js area chart
- blank web page with d3.json(bardata.php) but works with d3.json(bardata.json)
- d3js error on decrementing datapoints - how to resolve?
- D3.csvParse and D3.csv(filename) not working in Angular
- SVG: Moving mouse to <image> element triggers mouseout event of parent <g> element (d3.js)
- d3js display animated text into pie charts
- how to vertical the tree in d3js
- How to succesfully install d3 as Laravel dependency and bind it to a constant
- Manipulating Bars
- d3.js-adding different colors to one bar in stacked bar chart
- Checking node and it's all childrens on the basis of id
- get all rows from mysql tables in json format
- Editing label text in multibarchart in nvd3.js
- d3js preventing drag on click event
- crossfilter | animate through date range
- babelHelpers is not defined when using an old package
- D3.js (V4) Modifying Force Directed Graph with groups as nodes
- c3js - change the initial date label in x-axis
- d3.js projection (albersUsa) mapping incorrectly
- tooltip on chart not working
- D3.js: Quick mouse interaction causes improper views
- Expanding D3 Pie Chart to fill SVG
- d3 Multiline Graph Update
- D3 Chart values are not grouped (from JSON load)
- d3 linechart - Show 0 on the y-axis without passing in all points?
- How to correctly add labels to the d3 pie chart?
- Beeswarm plot, split "swarm" y value based on boolean
- geojson layer does not display when I load through d3.json
- x3dom chart does not display using d3
- D3.js radial collapsible radial tree (1 branch per ramification)