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。