Question

我试图制作一个条形图，从https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json

中提取一些数据

该项目是FCC d3项目的一部分。

我试图在鼠标悬停时在每个栏上创建div工具提示。

然而，我似乎无法获得＆＃39; x＆＃39;属性。当我悬停一个栏时，它会在控制台中说明这一点：

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)

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

其余代码供参考：

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

如果您希望d3定义this，则不能使用箭头功能，如here所述：

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

以下内容将按预期运行：

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

d3.select（this）没有选择rect

1 个答案: