d3.js將ID添加到堆積的條形圖

我已經創建了一個堆疊的條形圖，它將掃描和未掃描的項目描述爲條形，並且還添加了工具提示以表示鼠標移過時每個堆棧的值。但是，當我在棧上移動時，我想顯示「UnScanned - 57項目」這樣的工具提示，當我將鼠標移到較低的欄上時，它應該顯示「Scanned-50」。我只需要區分欄是否被掃描或未掃描以及顯示的數據值。d3.js將ID添加到堆積的條形圖

我的代碼是這樣：

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

來源

2014-01-30 krishna_v

你可以使這部分數據，你做圖表：

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

來源

2014-01-30 12:30:39

d3.js將ID添加到堆積的條形圖

回答

相關問題