1. 首页
  2. 问答
  3. 如何使用csv文件在d3组图中添加工具提示

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

2017-02-24 58 views
0

js图表我想在我的图表上显示工具提示。我不知道如何添加它。任何人都可以告诉我如何在我的图表上添加工具提示。如何使用csv文件在d3组图中添加工具提示

在这里，我有加我的代码：

<!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

来源

2017-02-24 Vinoth Sekar

回答

0

我有以下的代码添加到我的代码：

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

来源

2017-02-24 12:36:45

+0

但是对于这个小小的问题，工具提示显示在栏的顶部。 –

相关问题

 相关问题