d3.select(this) is not selecting the rect

Question

我正在尝试做一个barchart，从https://raw.githubusercercontent.com/freecodecamp/proecdeecamp/proectreferendecdedata/master/gdp-data.json.json

这个项目是FCC D3项目的一部分。

当您鼠标键入时，我正在尝试在每个栏上创建一个DIV工具。

但是，我似乎无法获得" x"属性。当我悬停在酒吧时，它在控制台中说：

TypeError: r.getAttribute is not a function
    at _t.yl [as attr] (d3.v4.min.js:4)
    at SVGRectElement.svg.selectAll.data.enter.append.attr.attr.attr.attr.attr.on.d (barchart.js:70)
    at SVGRectElement.<anonymous> (d3.v4.min.js:2)

这是矩形的代码段：

svg.selectAll('rect')
       .data(data)
       .enter()
       .append('rect')
       .attr('x', (d, i) => {
         return xScale(new Date(d[0]));
       })
       .attr('y', d => {
         return yScale(d[1]) - padding;
       })
       .attr('width', Math.round(w / data.length))
       .attr('height', d => {
         return h - yScale(d[1]);
       })
       .attr('fill', d => {
         return `rgb(50, 50, ${Math.floor(colorScale(d[1]))})`;
       })
       .on('mouseover', d => {
         console.log(d3.select(this).attr('x'));
       });

代码的其余部分供参考：

$('document').ready(function() {
  const url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
  $.getJSON(url, function(json) {
    const data = json.data;
    const margin = {
      top: 30,
      right: 10,
      bottom: 30,
      left: 75
    };
    const w = 1000;
    const h = 500;
    const padding = 20;

    const minDate = new Date(data[0][0]);
    const maxDate = new Date(data[274][0]);
    const xScale = d3.scaleTime()
                   .domain([minDate, maxDate])
                   .range([margin.left, w - margin.right]);
    const yScale = d3.scaleLinear()
                   .domain([0, d3.max(data, d => { return d[1] })])
                   .range([h - margin.bottom, margin.top]);
    const colorScale = d3.scaleLinear()
                       .domain([0, d3.max(data, d => { return d[1] })])
                       .range([0, 255]);
    const xAxis = d3.axisBottom(xScale)
                  .ticks(d3.timeYear.every(5));
    const yAxis = d3.axisLeft(yScale);
    var div = d3.select('body')
                .append('div')
                .attr('class', 'tooltip')
                .style('opacity', 0);

    const svg = d3.select('body')
           .append('svg')
           .attr('width', w)
           .attr('height', h);
    svg.selectAll('rect')
       .data(data)
       .enter()
       .append('rect')
       .attr('x', (d, i) => {
         return xScale(new Date(d[0]));
       })
       .attr('y', d => {
         return yScale(d[1]) - padding;
       })
       .attr('width', Math.round(w / data.length))
       .attr('height', d => {
         return h - yScale(d[1]);
       })
       .attr('fill', d => {
         return `rgb(50, 50, ${Math.floor(colorScale(d[1]))})`;
       })
       .on('mouseover', d => {
         console.log(d3.select(this).attr('x'));
       });
    svg.append('g')
       .attr('class', 'axis')
       .attr('transform', `translate(0, ${h - padding})`)
       .call(xAxis);
    svg.append('g')
       .attr('class', 'axis')
       .attr('transform', `translate(${margin.left}, 0)`)
       .call(yAxis);
    svg.append("text")
       .attr("transform", "rotate(-90)")
       .attr('x', - margin.top)
       .attr("y", margin.left + padding)
       .style("text-anchor", "end")
       .text("Gross Domestic Product, USA");
  });
});

Answer 1

如果您希望this由D3定义，则不能使用箭头函数，如下所示：

箭头函数不会创建自己的上下文，因此this从封闭的上下文中具有其原始含义。

以下内容将按照您的期望工作：

 .on('mouseover', function(d) {
     console.log(d3.select(this).attr('x'));
 });