D3.js Гистограмма не отображается правильно?

Question

У меня есть гистограмма в моей программе, но она, похоже, не отображается правильно. Кажется, что все бары намного больше, чем предполагалось. Вот соответствующий код:

//Bar Graph 

var canvas = d3.select("#canvas"); 
canvas.width = 500; 
canvas.height = 500; 
var values = [1, 2, 3] 

var colours = ['#FA0', '#0AF', '#AF0'] 

var data = [] 

var yOffset = 0 

//create scale 
yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top, 
MARGINS.bottom]).domain([0, 6]); 

//Process the data 

for (var i = 0; i < values.length; i++) { 

    var datum = { 

     value: yRange2(values[i]), 
     colour: colours[i], 
     x: 0, 
     y: yOffset 

    } 

    yOffset += datum.value; 

    data.push(datum) 

} 

//setup y 
yAxis2 = d3.svg.axis() 
    .scale(yRange2) 
    .tickSize(5) 
    .orient("left") 
    .tickSubdivide(true); 

canvas.append("svg:g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis2); 

var bars = canvas.selectAll('rect').data(data) 

bars 
    .enter() 
    .append('rect') 
    .attr({ 
     width: 30, 
     x: 60, 
     y: function (d) { 
      return d.y 
     }, 
     height: function (d) { 
      return d.value; 
     } 

    }) 
    .style({ 
     fill: function (d) { 
      return d.colour 
     } 
    }) 

//updates when slider changes 
$("#myRange").change(function() { 
    slider = $("#myRange").val(); 

    updateXs(); 
    updateLineData(); 
    displayVals(); 

    d3.select(".myLine").transition() 
     .attr("d", lineFunc(lineData)); 
}); 

А вот полный код: http://jsfiddle.net/tqj5maza/7/

Для меня это выглядит как стержни, начиная с верхней по какой-то причине, а затем идти вниз, следовательно, обрезание. Однако высота для каждого кажется слишком большой.

Answer 1

Вы не устанавливаете свойство высоты rects правильно. Generally Это высота области построения за вычетом позиции y. Образом у вас есть код структурирован его:

height: function (d) { 
    return canvas.height - MARGINS.top - d.value; 
} 

Чтобы исправить перекрывающееся й значение, вы должны настроить х d3.scale, но быстрый и грязный путь был бы:

x: function(d,i){ 
    return (i + 1) * 60; //<-- move each bar over 60 pixels 
} 

Обновленного код here.