How to get a specific item name in an array of objects in D3?

Question

I have a stacked bar chart that shows years on the X axis, total numbers on the Y axis, and the rect segments are colored by item type. A sample of my data array looks like this:

Item, Tonnes, Year
Wheat, 38913, 2020
Sugar, 23463, 2020
Rice, 23524, 2020
Wheat, 38913, 2019
Sugar, 23463, 2019
Rice, 23524, 2019

The formatted data used by D3 looks like this:

0: {year: 1995, Animal and Vegetable Oil: 38913, total: 3168499, Bananas: 25259, Beverages: 69583, …}
1: {year: 1996, Animal and Vegetable Oil: 44523, total: 3577090, Bananas: 30500, Beverages: 46411, …}

On hover, I'd like to retrieve the colored segment's item and tonnes integer so that I can pass them to a tooltip on hover. But my code seems to only retrieve the year and not the item.

The important part of my D3 code looks like this:

  // Set up stack method
  const stack = d3.stack().keys(tonnesKeys).order(d3.alphabetical)

  // Data, stacked
  const series = stack(formattedData);
  // Create SVG element
  const svg = d3
    .select("#mainChart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // Add a group for each row of data
  const groups = svg
    .selectAll("g")
    .data(series)
    .enter()
    .append("g")
    .attr("class", "axis")
    .call(xAxis)
    .call(yAxis)
    .style("fill", (_, i) => colors(i))

  // Add a rect for each data value
  groups
    .selectAll("rect")
    .data((d) => d)
    .enter()
    .append("rect")
    .attr("x", (_, i) => xScale(i))
    .attr("y", (d) => yScale(d[1]))
    .attr("height", (d) => yScale(d[0]) - yScale(d[1]))
    .attr("width", xScale.bandwidth())
};

The stacked bar chart looks like this:

I would love to achieve a tooltip that shows the item and the int on hover:

Thank you for your time and helping someone who is learning D3,

See this on how to access the rectangle's type - it's one approach, there are others if this isn't suitable. — Andrew Reid
– Andrew Reid, Commented Oct 5, 2020 at 2:24

Denise Mauldin · Accepted Answer · 2020-10-05 20:20:02Z

3

You need to have a mouseenter event that creates or updates a tooltip object. Typically this is a div that is created once at the start of the visualization and updated with text and location by the mouseenter event.

This is example code that won't work without updates to your chart:

const tooltip = d3.select("body").append("div")
  .attr("class", "svg-tooltip")
    .style("position", "absolute")
    .style("visibility", "hidden");

  d3.selectAll("YOUR BAR CLASS")
    .on("mouseenter", function(event) {
      event.preventDefault();
      const t = d3.pointers(event, this);
      tooltip.style("visibility", "visible")
        .style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px")
        .text(this.YOURTEXTATTRIBUTE)
    .on("mouseout", function(){
      tooltip.style("visibility", "hidden");
    });

answered Oct 5, 2020 at 20:20

Denise Mauldin

5,6555 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get a specific item name in an array of objects in D3?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related