score:5
i had the same issue a few days ago. the way i did it is as follows:
we have two .join
, the parent one is for the stack and the child is for the rectangles.
in the enter
of the parent join, we call the updaterects
in order to draw the rectangles for the first time, this updaterects
function will do the child .join
, this second join function will draw the rectangles.
for the update we do the same, but instead of doing it in the enter
function of the join, we do it in the update
.
also, my svg is structured in a different way, i have a stacks groups, then i have the stack group, and a bars group, in this bars group i add the rectangles. in the fiddle below, you can see that i added the parent group with the class stack
.
the two functions are below:
updatestack:
function updatestack(data) {
// update the y scale
y.domain([0, d3.max(data.map((d) => d.sum))]);
g.select(".y").transition().duration(1000).call(yaxis);
const stackdata = stack(data);
stackdata.foreach((stackedbar) => {
stackedbar.foreach((stack) => {
stack.id = `${stackedbar.key}-${stack.data.year}`;
});
});
let bars = g
.selectall("g.stacks")
.selectall(".stack")
.data(stackdata, (d) => {
return d.key;
});
bars.join(
(enter) => {
const barsenter = enter.append("g").attr("class", "stack");
barsenter
.append("g")
.attr("class", "bars")
.attr("fill", (d) => {
return color(d.key);
});
updaterects(barsenter.select(".bars"));
return enter;
},
(update) => {
const barsupdate = update.select(".bars");
updaterects(barsupdate);
},
(exit) => {
return exit.remove();
}
);
}
updaterects:
function updaterects(childrects) {
childrects
.selectall("rect")
.data(
(d) => d,
(d) => d.id
)
.join(
(enter) =>
enter
.append("rect")
.attr("id", (d) => d.id)
.attr("class", "bar")
.attr("x", (d) => x(d.data.year))
.attr("y", y(0))
.attr("width", x.bandwidth())
.call((enter) =>
enter
.transition()
.duration(1000)
.attr("y", (d) => y(d[1]))
.attr("height", (d) => y(d[0]) - y(d[1]))
),
(update) =>
update.call((update) =>
update
.transition()
.duration(1000)
.attr("y", (d) => y(d[1]))
.attr("height", (d) => y(d[0]) - y(d[1]))
),
(exit) =>
exit.call((exit) =>
exit
.transition()
.duration(1000)
.attr("y", height)
.attr("height", height)
)
);
}
here is an update jsfiddle https://jsfiddle.net/5oqwlxdj/1/
i hope it helps.
score:0
it is getting called, but you can't see it. try changing .attr(d => console.log('update stack'))
to .attr(console.log('update stack'))
.
Source: stackoverflow.com
Related Query
- d3 Update stacked bar graph using selection.join
- Filtering in stacked bar chart using d3 v3.js by changing data on input selection
- how to access specific data in an array using D3.js v5 for a stacked bar graph tooltip
- Stacked bar graph in D3 using internal JSON variable
- D3.js animating update of stacked bar graph
- d3js update redraw stacked bar graph
- d3.js: Nested Selection with update using `join`
- How to use tool tip in Line bar graph using D3 js
- d3.js - stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph
- D3: Using a closure to update a selection without re-binding data
- Exapandable Stacked bar charts using d3.js
- Stacked Bar Chart using d3.js stack layout; the bar sections not always in correct place
- How to create a stacked bar chart using dc.js?
- D3 JS stacked bar at top instead of bottom using path
- Adapting diverging stacked bar chart to use general update pattern
- Single Stacked Bar Graph Data Setup?
- Using JSON in d3v4 stacked bar chart
- Using data(...) in D3 force layout to update the graph
- D3: How to do an update pattern on normalized stacked bar chart?
- Using d3-tip and CSS hover effect with d3 stacked bar chart
- d3.js - How to do data mapping and filter for Stacked Bar graph
- Stacked column chart with a line in one graph using d3.js
- Is this JSON structure suitable for a stacked bar chart using d3.js?
- How do I set the X values for a singled stacked horizontal bar chart using d3.js?
- Can't add title to stacked bar graph on D3
- Total height of Stacked Bar on tip of every rectangle in stacked Bar Chart using d3
- How to use log scale to show proper stacked bar chart using d3 JS?
- Dc.js : Not able to order my bar graph using ordering
- Using General update pattern in line graph
- d3 Force Directed Graph General Update Pattern - exit() selection not working
More Query from same tag
- How to call d3.svg.line() independently?
- Updating Text Labels in D3JS
- d3.csv linked GitHub
- Creating a bar chart in D3 from subset of json data. Xaxis is ordinal
- Trying to add background images to D3 circles
- d3 barchart animates on load, but not on update
- Can't load .csv file on server in D3.js code
- NVD3 - Adding and resizing multiple vertical lines to stacked area chart
- Adding links to D3 axis labels
- D3. Within a text string how do I style substrings?
- Dynamically project a Single County
- d3.js title above responsive chart with fixed aspect ratio
- Loading a huge image (5mb) into svg background leads to pixelation and performance issues
- c3.js. Creating graphs within a loop to multiple divs with the same class/ID?
- D3: What is a Bisector?
- Let's make a map tutorial, stuck at projection step
- d3, pie chart, labels outside not working properly
- Javascript D3 not showing visualization
- D3 - position tooltip
- Line chart: points over ticks
- Complex circle diagram
- D3.js - How to create transitions with drop down control for donut chart?
- Is it possible to use date ranges as individual date items on time scale in D3.js?
- Keep Treemap inside bootstrap div
- How to create scatter plot one after another removing previous in d3js?
- Error Cannot read property 'getBoundingClientRect' of null in d3-gantt charts
- d3js how to get rotated rect's corner coordinates?
- Scale in different units
- d3 : coloring dots on a scatterplot using column in dataset
- how to add data in d3 bubble chart?