D3 Title and tooltip text

1

Next problem I have is getting the tooltip to display anything.
I was trying to target other divs on the page but nothing happens.
Also adding a title would be nice.

No clue what this code is doing (apart from adding the Y-axis):

  chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("y", 6)
    .attr("dy", ".71em")
    .attr("transform", "rotate(-90)")
    .style("text-anchor", "end")
    .text("Gross Domestic Product, USA");
2

try changing that code to this (only 1 line different) and see if it makes more sense

  chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  
  chart.append("g")
    .append("text")
    .attr("y", 6)
    .attr("dy", ".71em")
    .attr("transform", "rotate(-90)")
    .style("text-anchor", "end")
    .text("Gross Domestic Product, USA");

D3 is tough and it takes some exploring and experimenting. it’s mainly a toolkit to work inside an SVG element so you shouldn’t try to target divs like you would with jQuery.

All I can recommend is looking at other examples on bl.ocks.org with features or functionality that you’re trying to replicate. For a tooltip, you should probably be using the .on("mouseover" feature.

1 Like