d3.select (this) die Auswahl ist nicht die rect

Question

Ich versuche, ein Balkendiagramm zu machen einige Daten aus https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json

zieht Dieses Projekt ist Teil der FCC-d3-Projekte ist.

Ich versuche, eine div-Tooltip auf jeden Balken zu erstellen, wenn Sie den Mauszeiger darüber bewegen.

Allerdings kann ich nicht scheinen, das 'x' Attribut zu bekommen. Wenn ich eine Bar schweben, sagt er dies in der Konsole:

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) 

Hier ist der Code-Snippet für die Rects:

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')); 
     }); 

Rest der Code als Referenz:

$('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

Sie können nicht Verwenden Sie eine Pfeilfunktion, wenn Sie möchten, dass this durch d3 definiert wird, wie angegeben here:

Eine Pfeilfunktion erstellt diesen Kontext nicht selbst, daher hat this seine ursprüngliche Bedeutung aus dem umschließenden Kontext.

Im Folgenden wird, wie Sie arbeiten erwarten:

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