如何使用CSV文件在D3分組圖中添加工具提示

Question

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文件代碼。 誰能告訴我如何添加工具提示。

謝謝

Vinoth

Answer 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;
         });

如何使用CSV文件在D3分組圖中添加工具提示

問題描述

1 個解決方案

解決方案1
0 2017-02-24 12:36:45

如何使用CSV文件在D3分組圖中添加工具提示

問題描述

1 個解決方案

解決方案1 0 2017-02-24 12:36:45

解決方案1
0 2017-02-24 12:36:45