D3 event listeners returning MouseEvent instead the datum

Question

I am trying to do a basic D3 interaction with a bar graph. The only thing that I want to do is hover the mouse on a bar and it will return the datum that is associated with that rectangle. But whenever I hover over the bar I get the MouseEvent constructor instead of the datapoint from the datum, I get the MouseEvent.

I don't know if my d3 selections are off.

drawBarChart = async () =>{

  //1. Access the data
  const dataset = await d3.csv('./bodypart-injury-clean.csv');
  console.log(dataset);

  // xAccessor

  
    //accessor functions
    const xAccessor = d => d.BodyRegion;

    console.log(dataset[2].BodyRegion)
    console.log(xAccessor(dataset[0]))

    //parses a string into a date object

    const yAccessor = d => +d.Total;
    console.log(yAccessor(dataset[2]));

 
  //2. create the dimensions
  const width = 600;

  let dimensions ={
      width:width,
      height: width * 0.6,
      margin:{
          top:30,
          right:10,
          bottom:50,
          left:50
      },
  };

  dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

  //3. draw canvas

  const wrapper = d3.select("#wrapper")
                  .append("svg")
                  .attr("width",dimensions.width)
                  .attr("height",dimensions.height)
                  .append("g")
                  .style("transform",`translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)




//   //each type of pokemong
//   //the number for each type

  //4. create scales


  const xScale = d3.scaleBand()
                  .domain(["Arm", "Eye", "Head", "Hand","Leg","Other"])
                  .range([0,dimensions.boundedWidth])
                  .padding(0.2)




  const yScale = d3.scaleLinear()
                 .domain(d3.extent(dataset,yAccessor))
                  .range([dimensions.boundedHeight,0])
                  .nice()

//   //we are looping through an object so we need to use object entries



  //5. draw data


  
  
 const barRect = wrapper.append("g")
      .selectAll('rect')
      .data(dataset)
      .join('rect')
      // xScale takes the type, returns the left/right location
      .attr("x", d => xScale(d.BodyRegion))

       // yScale gets the count from the object
      .attr("y", d => yScale(+d.Total))

      .attr("width", xScale.bandwidth())

      // height has to be the distance from bar top to chart bottom
      .attr("height", d=> dimensions.boundedHeight- yScale(+d.Total))
      .attr("fill","teal")
      

      
       barRect.on("mouseenter", function(datum, index, nodes) {
         console.log(datum)
         console.log(index)
        console.log(nodes)
         })

     
      

      wrapper.append("g").selectAll("text")
      .data(dataset)
      .join("text")
      .attr("x", d=>xScale(d.BodyRegion))
      .attr("y", d => yScale(+d.Total))
      .text(d => +d.Total)
      .attr('fill','purple')

      
//   //7. set up interactions
  
}

drawBarChart()

Here is my code https://github.com/zaynaib/dataVizPractice/tree/interact/Day9/dataviz/bar-chart

user_13439405 · Answer

In the latest version, d3 v6, the API for events has changed:

  selection.on("mouseenter", function(event, d) {
    const e = selection.nodes();
    const i = e.indexOf(this);
    console.log(d, i, e);
  })

If you want to use the v5 API, use in your HTML:

D3 event listeners returning MouseEvent instead the datum

1 Answers