d3.select(this) 不是选择矩形

Question

我正在尝试制作一个条形图，从https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.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 上下文，因此this具有其封闭上下文的原始含义。

以下将按您的预期工作：

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