Hy I am stuck please help

    .attr("class", "bar")
    .attr("fill", "red")
    .attr("x", function(d,i){ return unixScale(d[2]) })
    .attr("y", function(d,i){ return yScale(d[1]) })
    .attr("width", barWidth)
    .attr("height", function(d){ return d[1]/25 + "px" })
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
    .on("mouseover", function(d){
                .style("opacity", 0.9);
      tooltip.html("Date:" + d[0] + "<br>$" + d[1] + " Billion")
                .style("left", d3.event.pageX + 20 + "px")
                .style("top", d3.event.pageY + 20 + "px");
      tooltip.attr("data-date", d[0])
  .on("mouseout", function(d){
        .style("opacity", 0);
  const xAxis = d3.axisBottom(xScale);
    .attr("transform", "translate(0, " + ( h - padding ) +")")
    .attr("id", "x-axis")
  const yAxis = d3.axisLeft(yScale);
    .attr("transform", `translate( ${padding}, 0)`)
    .attr("id", "y-axis")


  • 1. I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area

2. My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.