Question

我创建了一个堆积条形图，它将扫描和未扫描的项目描绘为条形图，并添加工具提示以表示鼠标移动时每个堆栈的值。然而，当我移动堆栈时，我想显示工具提示，如“UnScanned - 57 items”，当我将鼠标移到下方栏上时，它应显示“Scanned - 50”。我只需要区分条形图是否扫描或未扫描以及显示的数据值。

我的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Scanned vs Non Scanned Data</title>

    <script src="http://d3js.org/d3.v3.min.js"></script>
   <script type="text/javascript" src="../../js/Core_functions.js"></script>
   <script type="text/javascript" src="../../js/graphic_functions.js"></script>


    <style type="text/css">

svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

    </style>
  </head>
  <body>

<div id="container">
<h1>Mockup of Component Scanned Mapping DV</h1>
</div>

    <script type="text/javascript">


var w = 960,
    h = 500,
    p = [20, 50, 30, 20],
    x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
    y = d3.scale.linear().range([0, h - p[0] - p[2]]),
    z = d3.scale.ordinal().range(["#819FF7", "#CB491A"]),
    parse = d3.time.format("%m/%Y").parse,
    format = d3.time.format("%b-%y");

    /*var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(12)
    .orient("left");*/

var svg = d3.select("#container").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");

d3.csv("scandata.csv", function(scan) {

  // Transpose the data into layers by cause.
  var scantypes = d3.layout.stack()(["scanned", "unscanned"].map(function(scans) {
    return scan.map(function(d) {
      return {x: parse(d.date), y: +d[scans]};
    });
  }));

  // Compute the x-domain (by date) and y-domain (by top).
  x.domain(scantypes [0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(scantypes[scantypes .length - 1], function(d) { return d.y0 + d.y; })]);

  // Add a group for each column.
  var cause = svg.selectAll("g.scan")
      .data(scantypes)
    .enter().append("svg:g")
      .attr("class", "scan")
      .style("fill", function(d, i) { return z(i); })
      .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

  // Add a rect for each date.
  var rect = cause.selectAll("rect")
      .data(Object)
    .enter().append("svg:rect")
      .attr("x", function(d,i) { 
                        if (i ==0) 
                        { 
                            return x(d.x)+ 10 ;
                        } 
                        else 
                        {
                            return x(d.x);
                        }} )
      .attr("y", function(d) { return -y(d.y0) - y(d.y); })
      .attr("height", function(d) { return y(d.y); })
      .attr("width", x.rangeBand()/2)
    .on("mouseover", function(d){

                   return tooltip.style("visibility", "visible")
                                   .text((d.y))
                                   .style("left", (d3.event.pageX) + "px") 
                                   .style("top", (d3.event.pageY - 20) + "px");      ;})
      .on("mousemove", function(d){

                      return tooltip.style("visibility", "visible")
                                   .text((d.y))
                                   .style("left", (d3.event.pageX) + "px") 
                                   .style("top", (d3.event.pageY - 20) + "px");      ;})

      .on("mouseout", function(d){return tooltip.style("visibility", "hidden");}) 
      .on("click", function(d){console.log(d);});



  var tooltip = d3.select("#container")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "visible")
    .text("Scanned vs UnScanned")
    .style("font", "Arial")
    .style("font-size", "14px");

  // Add a label per date.
  var label = svg.selectAll("text")
      .data(x.domain())
    .enter().append("svg:text")
      .attr("x", function(d) { return x(d) + x.rangeBand() / 3; })
      .attr("y", 6)
      .attr("text-anchor", "middle")
      .attr("dy", ".71em")
      .text(format);

  // Add y-axis rules.
  var rule = svg.selectAll("g.rule")
      .data(y.ticks(5))
    .enter().append("svg:g")
      .attr("class", "rule")
      .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });

  rule.append("svg:line")
      .attr("x2", w - p[1] - p[3])
      .style("stroke", function(d) { return d ? "#fff" : "#000"; })
      .style("stroke-opacity", function(d) { return d ? .7 : null; });

  rule.append("svg:text")
      .attr("x", -15)
      .style("font-family","Arial 12px")
      .attr("dy", ".25em")
      .text(d3.format(",d"));




});

    </script>
  </body>
</html>    </script>
  </body>
</html>

我的csv数据：

date,scanned,unscanned
01/2014,10,90
02/2014,55,40
03/2014,45,23
04/2014,65,35
05/2014,100,20
06/2014,50,30
07/2014,10,90
08/2014,22,48
09/2014,0,100
10/2014,3,97
11/2014,22,60
12/2014,57,37

Answer 1

您可以将这部分数据用于图表：

var scantypes = d3.layout.stack()(["scanned", "unscanned"].map(function(scans) {
  return scan.map(function(d) {
    return {x: parse(d.date), y: +d[scans], type: scans};
  });
}));
// more code...
.on("mouseover", function(d){
  return tooltip.text(d.type + " - " + d.y);
});

d3.js将id添加到堆积条形图中

1 个答案: