how to add tooltip for rectangles in d3.js reading from json

Question

I would like to create rectangles and have a tooltip for the same.

My json data is :

[
   [{ "a":10},{"b":11}],
   [{ "c":1},{"d":1}]
]

My code is :

var svggraph = d3.select("#graph").append("svg").attr("id","svggraph")
    .attr("width", 400)
    .attr("height", 300)
    .append("g")
    .attr("transform", "translate(50," + margin.top + ")");

var yvar = 20;
var x_axis = 1;

d3.json("Data.json", function(data) 
    {
        rectdata = data;

        for(x=0;x<rectdata.length;x++)
        {

          console.log(rectdata[x]);
          for (index=0;index<2; index++)
          {
            svggraph.append("rect")
                              .attr("x", setxaxis(index)) 
                              .attr("y", setyaxis(yvar))
                              .attr("width", 20)
                              .attr("height", 21)
                              .style("fill","white")    
                              .style("stroke","black");
                  svggraph.append("svg:title").text(function(d) { return "Tooltip"; });

          }

            yvar = yvar+21;
        }



    });



function setxaxis(x)
{


    if (x==4) return;

    if(x==0) 
    {
        return x_axis=0
    }
    else
    {
        x_axis=x_axis+25;
    }

    return x_axis; 

}
function setyaxis(y)
{

    return y; 


}

how to add tooltip like "a:10" or "b:11" on the 2X2 rectangle array created on the corresponding rectangles?

[This question](http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220) may help. — Lars Kotthoff, Jan 17 '14 at 13:08
i added the line to show test tooltip but did not help. I am editing the code so that it reflects the same. — krishna_v, Jan 17 '14 at 14:39
You need to append the `title` to the `rect`, i.e. `svggraph.append("rect").append("title")`. — Lars Kotthoff, Jan 17 '14 at 14:42

score 6 · Accepted Answer · edited May 23 '17 at 11:54

6

The easiest way to add a tooltip in SVG is to append a title element to the element you want to show a tooltip for (see e.g. this question).

In your code, this would look something like this.

svggraph.append("rect")
  // set attributes
  .append("title")
  .text(function(d) { return "Tooltip"; });

edited May 23 '17 at 11:54

Community

1
1

answered Jan 22 '14 at 10:45

Lars Kotthoff

107,425
16
204
204

how to add tooltip for rectangles in d3.js reading from json

1 Answers1