1

我的堆积条形图存在以下问题。一些标签映射在正确的条上。有人可以告诉我有什么问题吗？

标签错位

我使用的代码：

var jsonDataResult = [{"Key":"08:00","Stack1":11,"Stack2":10,"Stack3":30},{"Key":"08:30","Stack1":23,"Stack2":1,"Stack3":3},{"Key":"09:00","Stack1":3,"Stack2":1,"Stack3":6},{"Key":"09:30","Stack1":5,"Stack2":5,"Stack3":1},{"Key":"10:00","Stack1":8,"Stack2":9,"Stack3":9},{"Key":"10:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"11:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"11:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"12:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"12:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"13:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"13:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"14:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"14:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"15:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"15:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"16:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"16:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"17:00","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"17:30","Stack1":0,"Stack2":0,"Stack3":0},{"Key":"18:00","Stack1":0,"Stack2":0,"Stack3":0}]


   var n = 3, // number of layers
        m = jsonDataResult.length, // number of samples per layer
        stack = d3.layout.stack(),
        labels = jsonDataResult.map(function (d) { return d.Key; }),
        labelsStack = jsonDataResult.map(function (d) { return (d.Stack1 + d.Stack2 + d.Stack3); }),
        layers = stack(d3.range(n).map(function (d) {
            var a = [];
            for (var i = 0; i < m; ++i) {
                a[i] = { x: i, y: jsonDataResult[i]['Stack' + (d + 1)] };
            }
            return a;
        })),
        yGroupMax = d3.max(layers, function (layer) { return d3.max(layer, function (d) { return d.y; }); }),
        yStackMax = d3.max(layers, function (layer) { return d3.max(layer, function (d) { return d.y0 + d.y; }); });

    alert(labelsStack);

    var margin = { top: 20, right: 10, bottom: 55, left: 0 },
        width = 500 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

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

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

    var color = d3.scale.ordinal()
        .domain([0, n - 1])
         .range(["green", "red", "orange"]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickSize(0)
        .tickPadding(0, 0, 0, 10)
        .tickValues(labels)
        .orient("bottom");

    var xAxis2 = d3.svg.axis()
      .scale(x)
      .tickSize(0)
      .tickPadding(20, 0, 0, 10)
      .tickValues(labelsStack)
      .orient("top");

    var svg = d3.select("div." + chartToShow).append("svg")
        .attr("id", currentSvgChart)
        .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); });

    var rect = layer.selectAll("rect")
        .data(function (d) { return d; })
        .enter().append("rect")
        .attr("x", function (d) { return x(d.x); })
        .attr("y", height)
        .transition().duration(1000)
        .attr("width", x.rangeBand())
        .attr("height", 0);

    rect.transition()
        .delay(function (d, i) { return i * 10; })
        .attr("y", function (d) { return y(d.y0 + d.y); })
        .attr("height", function (d) { return y(d.y0) - y(d.y0 + d.y); });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("font-family", "verdana")
        .attr("font-size", "14px")
        .attr("fill", "black")
        .attr("x", "-5px")
        .attr("transform", function (d) { return "rotate(-90)" });

     svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis2)
    .selectAll("text")
    .style("text-anchor", "middle")
    .attr("dx", "-0.5em")
    .attr("font-family", "verdana")
    .attr("font-size", "14px")
    .attr("fill", "black")
    .attr("x", "0")
    .attr("y", function (d) { return -((height / yStackMax) * d) - 5 });
4

2 回答 2

0

您尝试做的事情不起作用，因为您在第二个轴上使用了错误的刻度/刻度。比例是序数，但刻度值是数字，因此您得到的x位置不正确。

如果您不（ab）使用轴来执行此操作，则会容易得多。您所要做的就是附加文本元素，如下所示。

svg.append("g").selectAll("text")
    .data(jsonDataResult).enter()
    .append("text")
    .attr("dx", "0.1em")
    .attr("dy", "-0.5em")
    .attr("x", function(d) { return x(d.Key); })
    .attr("y", function(d) { return y(d.Stack1 + d.Stack2 + d.Stack3); })
    .text(function(d) { return (d.Stack1 + d.Stack2 + d.Stack3); });
于 2013-06-20T13:42:47.297 回答
0

我稍微修改了代码，所以标签就在堆叠条的上方。

在此处输入图像描述

 svg.append("g").selectAll("text")
            .data(jsonDataResult).enter()
            .append("text")
            .attr("dx", "0.1em")
            .attr("dy", "-0.5em")
            .attr("x", function (d) { return x(d.Key); })
            .attr("y", function (d) {
                return (-((height / yStackMax) * (d.Stack1 + d.Stack2 + d.Stack3)))+height;
            })
            .text(function (d) { return (d.Stack1 + d.Stack2 + d.Stack3); });
于 2013-06-21T07:54:35.367 回答