D3比例不匹配圖

Question

我一直在根據子羣在這裏處理圖表：d3 bar chart with sub categories。

然而，數據點的比例與y軸的比例有些不同。我會認爲，無論域中的最大值是多少，圖中數據點的高度都會適合y軸上的相應值。當我運行這個時，儘管「250」在y軸上沒有達到「250」標記。我誤解了什麼根本？ Thx爲您提供幫助！

我的代碼：

var margin = {top: 35, right: 200, bottom: 20, left: 80}, 
    width = 960 - (margin.left + margin.right); 
    height = 400 - (margin.top + margin.bottom); 

var svg = d3.select("#d3space").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 data=[250,250,250]; // a global 
var data2=[data]; 
var coldomain=[]; 

console.log('data',data2); 

var max=370 

//  X AXIS SECTION 

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

     var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

//  Y AXIS SECTION 

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

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 


//  READ LEGEND ITEMS INTO D3 DEFAULT ARRAY OF 20 COLOURS 
     var color = d3.scale.category10() 
       .domain(data); 

     svg.append("g") //"g" is DOM shorthand for a "group" object, which is a heuristic that lets you add things to everything in that group later 
       .attr("class", "xAxis") 
       .attr("transform", "translate(0," + height + ")") //this is responsible for moving axis from top (svg default) to bottom     
       .call(xAxis) 
       .append("text") 
       .attr("x", width+margin.left) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .style("font-size", "16px") 
       .attr("transform", "translate(40,0), rotate(0)") 
       .text("Month") 
     ; 

//  Y AXIS TITLE 
     svg.append("g") 
       .attr("class", "yAxis") 
       .call(yAxis) 
       .append("text") 
       .attr("y", -17) 
       .attr("dy", ".71em") 
       .style("text-anchor", "middle") 
       .style("font-size", "16px") 
       .attr("transform", "translate(5,0), rotate(0)") 
       .text("Users") 
     ; 


     var month = svg.selectAll('.grp') 
      .data(data2) 
      .enter() 
      .append('g') 
//   .attr("class", "g") 
      .attr('transform', function (d, i) { 
       console.log('i',i); 
      return 'translate(' + x(i) + ', 0)'; 
     }); 


     month.selectAll("rect") 
      .data(function(d) { 
      console.log('d',d); 
      return d; }) 
      .enter().append("rect") 
      .attr("height", function(d) { 
       console.log('d',d); 
       return y(d); }) 
      .attr("x", function(d,i) { 
       console.log('x',i,x.rangeBand(),(i)*(x.rangeBand()/5)); 
       return (i)*(x.rangeBand()/5);}) 
      .attr("y", function(d,i) {return height-y(d);}) 
      .attr("width", 50) 
      .style("fill", function(d,i) { 
       console.log('col',color('A')); 
       return color(i); }); 

Answer 1

因爲SVG y座標是從頁面的頂部，您看到此行爲。也就是說，（0,0）是左上角，隨着y座標增加，您正在向下移動頁面。這意味着顯示條的意思是，您需要將y值的初始位置（y）和條的高度設置爲空間的剩餘部分到x 0座標，因爲該矩形向下延伸：

.attr("height", function(d) { return height-y(d); }) 
.attr("y", function(d,i) {return y(d);}) 

完成jsfiddle here。