Stacked Bar Chart with general update pattern d3.js-CodePudding

I know there are a few posts out here and I've been trying really hard for several hours today and yesterday. But I can not get the enter, update, exit to work in the most basic sense.

I've been trying to change an interactive bar plot that I made into a stacked bar plot. This hasn't worked at all and I thought to try to get the simplest case to work from an example here instead. However, even this I am not able to. I don't understand why.

const margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 800 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width   margin.left   margin.right)
    .attr("height", height   margin.top   margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv").then( function(data) {

// List of subgroups = header of the csv files = soil condition here
const subgroups = data.columns.slice(1)

// List of groups = species here = value of the first column called group -> I show them on the X axis
const groups = data.map(d => (d.group))

// Add X axis
const x = d3.scaleBand()
    .domain(groups)
    .range([0, width])
    .padding([0.2])
svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSizeOuter(0));

// Add Y axis
const y = d3.scaleLinear()
    .domain([0, 60])
    .range([ height, 0 ]);
svg.append("g")
    .call(d3.axisLeft(y));

// color palette = one color per subgroup
const color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

//stack the data? --> stack per subgroup
const stackedData = d3.stack()
    .keys(subgroups)
    (data)

// Show the bars
let bars = svg.append("g")
    .selectAll("g")
    .data(stackedData, d => d)

    bars.join(
    enter => {
        enter
        .append('g')
        .attr("fill", d => color(d.key))
        .selectAll("rect")
        .data(d=>d)
        .attr("x", d => x(d.data.group))
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
        .attr("width",x.bandwidth())
}, update => update, exit => exit.remove());
})

I only changed the code after //Show the bars

It works if instead of join(enter=> enter)

I only use enter().append('g)... etc. I thought these are doing the same thing?

Lastly, I've been trying to draw everything from D3 directly. Is it stupid to do that yourself instead of using ready-made functions from places like Observable? I want to learn, but I also want to be efficient.

thanks for any tips and help!

CodePudding user response：

You need to return the enter selection (you're using arrow function without returning anything from it)
You need to do .join('rect') after selectAll('rect').data(d => d) (if you don't join, nothing will be appended to the stack's <g>)

Here's the complete working solution (click the Run code snippet button below):

const margin = {
    top: 10,
    right: 30,
    bottom: 20,
    left: 50
  },
  width = 800 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", height   margin.top   margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv(
  "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv"
).then(function(data) {
  // List of subgroups = header of the csv files = soil condition here
  const subgroups = data.columns.slice(1);

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  const groups = data.map((d) => d.group);

  // Add X axis
  const x = d3.scaleBand().domain(groups).range([0, width]).padding([0.2]);
  svg
    .append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  const y = d3.scaleLinear().domain([0, 60]).range([height, 0]);
  svg.append("g").call(d3.axisLeft(y));

  // color palette = one color per subgroup
  const color = d3
    .scaleOrdinal()
    .domain(subgroups)
    .range(["#e41a1c", "#377eb8", "#4daf4a"]);

  //stack the data? --> stack per subgroup
  const stackedData = d3.stack().keys(subgroups)(data);

  // Show the bars
  let bars = svg
    .append("g")
    .selectAll("g")
    .data(stackedData, (d) => d);

  bars.join(
    (enter) => {
      // don't forget to return the enter selection after appending 
      return enter
        .append("g")
        .attr("fill", (d) => color(d.key))
        .selectAll("rect")
        .data((d) => d)
        // don't forget to join 'rect'
        .join("rect")
        .attr("x", (d) => x(d.data.group))
        .attr("y", (d) => y(d[1]))
        .attr("height", (d) => y(d[0]) - y(d[1]))
        .attr("width", x.bandwidth());
    },
    (update) => update,
    (exit) => exit.remove()
  );
});

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.3/d3.min.js"></script>