使用 .attr() 添加数据属性时出现“TypeError: undefined is not an object”

Question

I'm creating a bar graph and I need to show a tooltip when hovering over each bar. The tooltip must include a data attribute with the bar's date information. Using .attr("data-date", d => d[0]) I added the attribute to the bars, and yet it shows an error when used in the tooltip. (The tooltip works just fine if I remove line 53).

const w = 1000;
const h = 550;
const padding = 50;
const barPadding = 0.5;
 d3.json(
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
  json => {
    const minDate = d3.min(json.data, d => d[0]);
    const maxDate = d3.max(json.data, d => d[0]);
    const max = d3.max(json.data, d => d[1]);

    const xScale = d3
      .scaleTime()
      .domain([new Date(minDate), new Date(maxDate)])
      .range([padding, w - padding]);

    const yScale = d3
      .scaleLinear()
      .domain([0, max])
      .range([h - padding, padding]);

    const tooltip = d3
      .select("#container")
      .append("div")
      .attr("id", "tooltip")
      .style("width", padding);

    const svg = d3
      .select("#container")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    svg
      .selectAll("rect")
      .data(json.data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(new Date(d[0])))
      .attr("y", d => yScale(d[1]))
      .attr("width", w / json.data.length - barPadding)
      .attr("height", d => h - yScale(d[1]) - padding)
      .attr("class", "bar")
      .attr("data-date", d => d[0])
      .attr("data-gdp", d => d[1])
      .on("mouseover", (d, i) => {
        console.log(d[0]);
        tooltip
          .style("visibility", "visible")
          .style("top", `${yScale(d[1])}px`)
          .style("left", `${xScale(new Date(d[0])) - padding}px`)
          .attr("data-date", d => d[0])
          .html(`${d[0]} <br/> $${d[1]} Billion`);
      })
      .on("mouseout", () => tooltip.style("visibility", "hidden"));

    const xAxis = d3.axisBottom(xScale);
    const yAxis = d3.axisLeft(yScale);

    svg
      .append("g")
      .attr("transform", `translate(0, ${h - padding})`)
      .attr("id", "x-axis")
      .call(xAxis);

    svg
      .append("g")
      .attr("transform", `translate(${padding}, 0)`)
      .attr("id", "y-axis")
      .call(yAxis);
  }
);

Any help is appreciated. Fiddle: http://jsfiddle.net/s1tpyuoc/

Answer 1

Let's simplify your code and see what you have:

selection.on("mouseover", (d, i) => {
    tooltip.attr("data-date", d => d[0]);
})

You may think that this sets the first element of d as the "data-date" property of tooltip . But it doesn't: that second d in the callback of the attr method is not the same d of the selection:

selection.on("mouseover", (d, i) => {
    //this datum... -------^
    tooltip.attr("data-date", d => d[0]);
    //...is not the same of this---^
})

And, since there is no data bound to tooltip , that inner d is undefined .

The solution here is simply removing that line or, for whatever reason you want to set that attribute, doing:

tooltip.attr("data-date", d[0])

Here is the updated JSFiddle: http://jsfiddle.net/vxq9gcwr/