时间戳

首页 > 解决方案 > D3 事件侦听器返回 MouseEvent 而不是基准

javascript - D3 事件侦听器返回 MouseEvent 而不是基准

问题描述

我正在尝试使用条形图进行基本的 D3 交互。我唯一想做的就是将鼠标悬停在条上，它将返回与该矩形关联的基准。但是，每当我将鼠标悬停在栏上时，我都会得到 MouseEvent 构造函数，而不是来自数据的数据点，我得到的是 MouseEvent。

在此处输入图像描述

我不知道我的 d3 选择是否关闭。

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()
<!DOCTYPE html>
<html>
    <head>
          <link rel="stylesheet" href="style.css">

    </head>

    <body>
        <div id="wrapper"></div>


        <script src="https://d3js.org/d3.v6.min.js"></script>
        <script src="./app.js"></script>


    </body>
</html>

这是我的代码https://github.com/zaynaib/dataVizPractice/tree/interact/Day9/dataviz/bar-chart

标签： javascriptd3.js

解决方案

在最新版本 d3 v6 中，事件的 API 发生了变化：

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

如果您想使用 v5 API，请在您的 HTML 中使用：

<script src="https://d3js.org/d3.v5.min.js"></script>

推荐阅读