D3事件侦听器返回MouseEvent而不是数据 [英] D3 event listeners returning MouseEvent instead the datum
问题描述
我正在尝试使用条形图进行基本的D3交互.我唯一想做的就是将鼠标悬停在栏上，它将返回与该矩形关联的原点.但是每当我将鼠标悬停在栏上时，我都会得到MouseEvent构造函数而不是来自基准点的数据点，我得到了MouseEvent.
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.
我不知道我的d3选择是否已关闭.
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()<!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/条形图
推荐答案
在最新版本的d3 v6中，事件的API已更改:
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);
})
如果要使用v5 API，请在HTML中使用:
If you want to use the v5 API, use in your HTML:
<script src="https://d3js.org/d3.v5.min.js"></script>
这篇关于D3事件侦听器返回MouseEvent而不是数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
