score:2
using a key function when binding the data is a very good practice in d3, which ensures object constancy. so, contrary to the suggestion in the accepted other answer, you should not remove it.
instead of removing it, just fix the key function. the problem right now is that since the keys are...
["team 1 cc", "team 2 cc", "team 3 cc"]
... for the selected dataset, this...
d.key.split(' ')[0]
.. will return team
for every group, and the keys obviously cannot be the same.
so, just do...
d.key.split(' ')[0] + d.key.split(' ')[1]
or even just...
d.key.slice(0, -3)
... which will return: team 1
, team 2
and team 3
.
here is your updated plunker: https://plnkr.co/edit/xcvmdj9a3yf37dzdma6d?p=preview
score:1
it looks like your mistake in this code:
let bargroups = g.selectall("g.layer")
.data(stacking, d=>d.key.split(' ')[0]);
you pass the second argument to .data
method. according to docs:
selection.data([data[, key]])
... a key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element.
if you remove it your visualization will work properly, checkmy fork of your plnkr.
Source: stackoverflow.com
Related Query
- Stacked bar chart not updating correctly d3js
- d3js stacked bar chart not updating
- d3 stacked bar chart not updating correctly
- D3js responsive stacked bar chart - other topics solutions not working
- Stacked Bar chart not displaying correctly
- d3 Stacked Bar Chart Not Updating
- D3: Stacked Bar Chart not parsing data correctly
- Stacked Bar Chart using d3.js stack layout; the bar sections not always in correct place
- D3 updating a vertical stacked bar chart
- Pagination in d3js stacked bar chart
- d3js chart dots and area not updating
- D3: Stacked bar chart exit().remove() not removing bars
- d3.js bar chart is not updating based on click event
- d3.js Stacked Bar Chart working for one dataset but not the other
- Stacked bar chart not showing and no errors in console log either
- d3 bar chart labels not getting updated on updating the chart with the new data
- How to display the total value of a stacked bar chart in d3js
- d3.js - updating stacked bar chart with new dataset
- D3.js bar chart animation not exiting correctly
- D3.js bar chart not animating correctly and leaving behind artifacts after animation
- x position of tooltip in d3 stacked bar chart not working
- Stacked Bar Chart D3js
- d3 stacked bar chart values not showing up on chart
- Can not show labels in group bar chart d3js v6
- d3js stacked bar chart variable keys
- D3 Pie chart not updating correctly
- Updating a stacked bar chart in d3.js (includes JSFiddle)
- D3 bar chart axis not scaling correctly
- dc.js Stacked Bar Chart having only one column and with elastic X Axis is not rendered properly
- d3 Stacked Bar Chart - Bars not rendering
More Query from same tag
- Connecting data and pop up in the map using D3
- D3 chart how to add arrow on each axis end
- D3.js Draw vertical line after every 2 bar and draw x-axis label on the top of bar chart
- d3 select change node datum
- D3 - tooltip to show all values
- d3js Cluster Force Layout IV block by Mike
- How to graph dates on X axis while skipping weekends d3.js?
- Adjust gap in between x-axis and label
- D3 zoomable pack chart update
- d3 v4: Tree map is giving NaN for x and y
- D3 fill shape when draw with path
- D3 find the angle of line
- Is there any way to customize the color of text on an axis on an svg element?
- D3.js update Treemap dynamically
- D3.js Choropleth Map - Change Color Scheme On Selection
- Increase link length in node-link graph using d3
- Electron file loaded but not showing in Network tab
- d3 - enter - appends too many elements, as if data is not bound
- d3 version 4 circle pack passing in data
- How reference an svg class in css?
- i change the "class" attribute of a node that exist in SVG, but not applied ! why?
- convert multilevel nested array using into json using javascript
- d3-geo: Find centroid inside multiple geometries
- Working with Vuex with Vue and displaying data
- nvd3 chart.useInteractiveGuideline(true); not updating properly
- Restart d3 simulation on user input from range slider
- d3js - d3.scale.category10() not working?
- append d3 text to existing html div
- Creating a dropdown/select list from csv with d3 nest
- d3.js reset positon of viewport