D3 - 剔錯位置

Question

我現在嘗試了幾件事情，但我無法弄清楚爲什麼我的蜱錯位。我用不同的來源來製作這個堆疊的條形圖。

這裏是我的代碼的小提琴：http://jsfiddle.net/azj7guec/

這裏是代碼本身：

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
width = 1000 - margin.left - margin.right, 
height = 300 - margin.top - margin.bottom; 

     x = d3.scale.ordinal().rangeRoundBands([0, width], .50); 
     y = d3.scale.linear().range([height, 0]); 
     z = d3.scale.ordinal().range(["darkblue", "blue", "lightblue"]) 


     console.log("RAW MATRIX---------------------------"); 
    // 4 columns: ID,c1,c2,c3 
     var matrix = [ 
      [22,45,34,65], 
      [23,66,12,22], 
      [24,32,44,76], 
      [25,12,76,32], 
      [26, 67, 34, 56] 
      ]; 
     console.log(matrix) 
     var keys = matrix.map(function(item){return item[0]}); 

     console.log("REMAP---------------------------"); 
     var remapped =["c1","c2","c3"].map(function(dat,i){ 
      return matrix.map(function(d,ii){ 
       return {x: d[0], y: d[i+1] }; 
      }) 
     }); 
     console.log(remapped) 

     console.log("LAYOUT---------------------------"); 
     var stacked = d3.layout.stack()(remapped) 
     console.log(stacked) 

     //var yMax= d3.max(stacked) 

     x.domain(keys); 
     y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]); 

     // show the domains of the scales 
     console.log("x.domain(): " + x.domain()) 
     console.log("y.domain(): " + y.domain()) 
     console.log("------------------------------------------------------------------"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .ticks(10) 

      .orient("left"); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .tickValues(keys) 
      .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 + ")"); 

    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("transform", function(d) { 
     return "rotate(-65)" 
     }); 


svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Open Issues"); 

     // Add a group for each column. 
     var valgroup = svg.selectAll("g.valgroup") 
     .data(stacked) 
     .enter().append("g") 
     .attr("class", "valgroup") 
     .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 = valgroup.selectAll("rect") 
     .data(function(d){return d;}) 
     .enter().append("rect") 
     .attr("width", 20) 
     .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); }); 
     //.attr("width", x.rangeBand()); 

希望有人能幫助我。

Answer 1

序數標度將輸出範圍劃分爲基於輸入域的間隔。您的當前定位將這些欄放在這些時間間隔的開始處，而蜱則位於中間。爲了匹配的位置，有一半的時間間隔減去一半線條的寬度增加了間隔的開始：

.attr("x", function(d) { return x(d.x) + (x.rangeBand() - 20)/2; }) 

完成演示here。