D3 Examples - titleTooltip

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>
</head>
<body>
  <script>
  // データの準備
  var dataset = [100, 150, 200];
  // svg領域の設定
  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; })
  </script>
</body>
</html>
    