D3 Examples - tipsyTooltip

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Tooltipのテスト</title>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="jquery.tipsy.js"></script>
    <link href="tipsy.css" rel="stylesheet" />
</head>
<body>
  <script>
  var dataset = [100, 150, 200];
​
  var svg = d3.select("body").append("svg")
          .attr("width", 300)
          .attr("height", 300);
​
  svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr({
        x: 0,
        y: function(d,i){ return i*30; },
        width: function(d){ return d; },
        height: 20,
        fill: "green",
       })
      .append("title")
      .text(function(d){ return d; })
​
    $("svg rect").tipsy({
      gravity: 'w',
      fade: true
    })
  </script>
</body>
</html>
    