堆棧欄上的d3標籤位置

Question

我堆疊的條形圖中存在以下問題。一些標籤映射在正確的欄上。 有人可以告訴我什麼是錯的？

的代碼我使用：用你的第二軸

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

Answer 1

你想這樣做，因爲你使用了錯誤的規模不工作是什麼/蜱。比例是有序的，但是刻度值是數字的，因此你會得到不正確的x頭寸。

如果您不使用軸來完成此操作，則會更容易。你所要做的就是追加文本元素，如下所示。

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

Answer 2

我修改了一下代碼，所以標籤就在堆疊條的上方。

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