如何使用 csv 文件在 d3 组图中添加工具提示答案

【问题标题】：How to add tool-tip in d3 group chart using csv file如何使用 csv 文件在 d3 组图中添加工具提示
【发布时间】：2017-02-24 12:00:02
【问题描述】：

js 图表我想在我的图表上显示工具提示。我不知道如何添加它。谁能告诉我如何在我的图表上添加工具提示。

在这里我添加了我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="d3.min.js"></script>
    <script src="d3-legend.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
    body { font: 12px Arial;}

    path { 
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }
      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }
      .axis .label {
        font-size: 20pt;
      }

      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

      .color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }

rect:hover {
                fill: #3EBCE6;
            }
rect {
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}


    </style>
  </head>
  <body>
    <script>
      var outerWidth = 1200;
      var outerHeight = 720;
      var margin = { left: 90, top: 30, right: 30, bottom: 40 };
      var barPadding = 0.2;

      var xColumn = "Building";
      var yColumn = "Total";
      var colorColumn = "Type";
      var layerColumn = colorColumn;

      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
debugger;
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth+500)
        .attr("height", outerHeight+150);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate("+(outerWidth )+", 0)");

      var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var colorScale = d3.scale.category10();

      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(7)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);

      var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shapePadding(2)
        .shapeWidth(15)
        .shapeHeight(15)
        .labelOffset(4);

      function render(data){

        var nested = d3.nest()
          .key(function (d){ return d[layerColumn]; })
          .entries(data)

        var stack = d3.layout.stack()
          .y(function (d){ return d[yColumn]; })
          .values(function (d){ return d.values; });

        var layers = stack(nested);

        xScale.domain(layers[0].values.map(function (d){
          return d[xColumn];
        }));

        yScale.domain([
          0,
          d3.max(layers, function (layer){
            return d3.max(layer.values, function (d){
              return d.y;
            });
          })
        ]);

        colorScale.domain(layers.map(function (layer){
          return layer.key;
        }));

        xAxisG.call(xAxis)
        .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.5em")
            .attr("dy", "-.0em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
                });
        yAxisG.call(yAxis);

        var layers = g.selectAll(".layer").data(layers);
        layers.enter().append("g").attr("class", "layer");
        layers.exit().remove();
        layers.style("fill", function (d){
          return colorScale(d.key);
        });

        var bars = layers.selectAll("rect").data(function (d){
          return d.values;
        });
        var barWidth = xScale.rangeBand() / colorScale.domain().length;
        bars.enter()
        .append("rect")
        bars.exit().remove();
        bars
          .attr("x", function (d, i, j){
            return xScale(d[xColumn]) + barWidth * j;
          })
          .attr("y", function (d){ return yScale(d.y); })
          .attr("width", barWidth)
          .attr("height", function (d){ return innerHeight - yScale(d.y); })


               .append("title")
   .text(function(d) {
         return d.VALUE;
         });
        colorLegendG.call(colorLegend);
      }

      function type(d){
        d.Total = +d.Total;
        return d;
      }

      d3.csv("D3.csv", type, render);



// Define the div for the tooltip


    </script>

  </body>
</html>

这是我的 csv 文件

Building,Type,Small,Medium,Large,Total
Building1,Food,68,38,40,146
Building1,Medicine,24,38,24,86
Building2,Food,31,24,40,95
Building2,Medicine,17,38,22,77
Building3,Food,24,24,22,70
Building3,Medicine,27,38,40,105
Building4,Food,23,38,24,85
Building4,Medicine,20,38,22,80
Building5,Food,17,24,40,81
Building5,Medicine,40,38,22,100
Building6,Food,68,38,40,146
Building6,Medicine,24,38,24,86
Building7,Food,31,24,40,95
Building7,Medicine,17,38,22,77
Building8,Food,24,24,22,70
Building8,Medicine,27,38,40,105
Building9,Food,23,38,24,85
Building9,Medicine,20,38,22,80
Building10,Food,17,24,40,81
Building10,Medicine,40,38,22,100
Building11,Food,17,24,40,81
Building11,Medicine,40,38,22,100
Building12,Food,68,38,40,146
Building12,Medicine,24,38,24,86
Building13,Food,31,24,40,95
Building13,Medicine,17,38,22,77
Building14,Food,24,24,22,70
Building14,Medicine,27,38,40,105
Building15,Food,23,38,24,85
Building15,Medicine,20,38,22,80
Building16,Food,17,24,40,81
Building16,Medicine,40,38,22,100
Building17,Food,17,24,40,81
Building17,Medicine,40,38,22,100

我已经上传了我的 d3 js 代码和 csv 文件代码。谁能告诉我如何添加工具提示。

谢谢

维诺特

【问题讨论】：

标签： javascript csv d3.js

【解决方案1】：

我已将以下代码添加到我的代码中：

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

风格

 .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }

    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }

脚本

 width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

        var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Type:</strong> <span style='color:red'>" + d.Type + "</span><br>" +
    "<strong>Small:</strong> <span style='color:red'>" + d.Small + "</span><br>"+
    "<strong>Medium:</strong> <span style='color:red'>" + d.Medium + "</span><br>"+
    "<strong>Large:</strong> <span style='color:red'>" + d.Large + "</span><br>";

  })

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

 bars
          .attr("x", function (d, i, j){
            return xScale(d[xColumn]) + barWidth * j;
          })
          .attr("y", function (d){ return yScale(d.y); })
          .attr("width", barWidth)
          .attr("height", function (d){ return innerHeight - yScale(d.y); })
           .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

               .append("title")
   .text(function(d) {
         return d.VALUE;
         });

【讨论】：

但是工具提示的小问题显示在栏的顶部。