3

我正在改编 Mike Bostock 的优秀堆积条形图示例。某些条形的 Y 值似乎没有显示在正确的位置。这是一个jsFiddle（下面的完整代码）。

我认为相关的片段在这里：

layer.selectAll("rect")
    .data(function(d) { return d.values; })
    .enter().append("rect")
    .attr("fill-opacity", .5)
    .attr("stroke", "#000")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

完整示例：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

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

</style>
<p>This is a test</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [
    {
        "key": "Key_2",
        "values": [
            {"x": "Cols # 21",  "y": 70},
            {"x": "Cols # 9",  "y": 39},
            {"x": "Cols # 8",  "y": 96},
            {"x": "Cols # 43",  "y": 95},
            {"x": "Cols # 16",  "y": 21},
            {"x": "Cols # 49",  "y": 24}
        ]
    },
    {
        "key": "Key_1",
        "values": [
            {"x": "Cols # 21",  "y": 93},
            {"x": "Cols # 9",  "y": 73},
            {"x": "Cols # 8",  "y": 94},
            {"x": "Cols # 16",  "y": 80},
            {"x": "Cols # 43",  "y": 56},
            {"x": "Cols # 49",  "y": 83}
        ]
    },
    {
        "key": "Key_0",
        "values": [
            {"x": "Cols # 21",  "y": 38},
            {"x": "Cols # 9",  "y": 88},
            {"x": "Cols # 8",  "y": 7},
            {"x": "Cols # 43",  "y": 38},
            {"x": "Cols # 16",  "y": 88},
            {"x": "Cols # 49",  "y": 77}
        ]
    }
]

var margin = {top: 40, right: 10, bottom: 20, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    keys = data[0].values.map(function(item){return item.x }),
    stack = d3.layout.stack().values(function(d){ return d.values;}),
    layers = stack(data),
    yMax = d3.max(layers, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + d.y; }); })

//Calulate totals for each x value in the domain
var totals = {};
    data.forEach(function(series){
      series.values.forEach(function(item){
       totals[item.x] = (totals[item.x] || 0 ) + item.y
      })
    })

var x = d3.scale.ordinal()
    .domain(keys)
    .rangeRoundBands([0, width], .08);

var y = d3.scale.linear()
    .domain([0, yMax])
    .range([height, 0]);

var color = d3.scale.linear()
    .domain([0, data.length - 1])
    .range(["#f00", "#00f"]);

var yAxis = d3.svg.axis()
    .scale(y)
    .tickSize(0)
    .tickPadding(6)
    .orient("left");

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(0)
    .tickPadding(6)
    .orient("bottom");

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 + ")");

var layer = svg.selectAll(".layer")
    .data(layers)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

layer.selectAll("rect")
    .data(function(d) { return d.values; })
    .enter().append("rect")
    .attr("fill-opacity", .5)
    .attr("stroke", "#000")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

layer.selectAll("text")
    .data(keys)
    .enter().append("text")
      .text( function(d){return d + ': '+ totals[d];})
      .attr('fill', '#000')
      .style('font-size', 15)
      .attr("x", function(d){ return x(d) + 25})

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);


</script>
4

1 回答 1

2

数据未正确排序似乎是一个问题：

比较：

var data = [
    {
        "key": "Key_2",
        "values": [
           {"x": "Cols # 21",  "y": 70},
           {"x": "Cols # 9",  "y": 39},
           {"x": "Cols # 8",  "y": 96},
           {"x": "Cols # 43",  "y": 95},
           {"x": "Cols # 16",  "y": 21},
           {"x": "Cols # 49",  "y": 24} ...

和：

var data = [
    {
        "key": "Key_2",
        "values": [
            {"x": "Cols # 21",  "y": 70},
            {"x": "Cols # 9",  "y": 39},
            {"x": "Cols # 8",  "y": 96},
            {"x": "Cols # 16",  "y": 21},
            {"x": "Cols # 43",  "y": 95},
            {"x": "Cols # 49",  "y": 24} ...
于 2013-07-17T22:46:32.067 回答