Горизонтальные гистограммы

Question

Я пытаюсь сделать сложную гистограмму, которая идет слева направо. Прямо сейчас у меня возникли некоторые проблемы с тем, как будет проходить интервал, и так будет, поскольку я не очень хорошо знаком с графической системой на компьютерах.

Вот мой код:

var canvas = d3.select("#canvas"); 
canvas.width = 500; 
canvas.height = 500; 

//rectangle values 
var values = [{ 
    cValue: Math.abs(xthree), 
    color: '#A0F' 
}, { 
    cValue: Math.abs(xtwo), 
    color: '#FA0' 
}, { 
    cValue: Math.abs(xone), 
    color: '#0AF' 
}, { 
    cValue: Math.abs(xzero), 
    color: '#AF0' 
}]; 

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

var yOffset = 0; 

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

//yrange2- imp-Set domain to be set to biggest number 
yRange2 = d3.scale.linear() 
    .domain([0, 10]) 
    .range([MARGINS.bottom, canvas.height - MARGINS.top]); 

//Process the data 

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

    var datum = { 

     value: yRange2(values[i].cValue), 
     colour: values[i].color, 
     y: 0, 
     x: yOffset 

    } 

    yOffset += (canvas.height - MARGINS.top - datum.value); 

    data.push(datum) 
} 

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

canvas.append("svg:g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (3 * MARGINS.bottom) + ")") 
    .call(yAxis2); 

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

var cumValues = 0; 
bars 
    .enter() 
    .append('rect') 
    .attr("class", "myBars" + function (d) { 
     return d.colour; 
    }) 
    .attr({ 
     height: 30, 
     y: 20, 
     x: function (d) { 
      return d.value - d.x; <----------------------------------- 
     }, 
     width: function (d) { 
      return canvas.width - MARGINS.left - d.value; <----------- 
     } 
    }) 
    .style({ 
     fill: function (d) { 
      return d.colour 
     } 
    }); 

Прямо сейчас, у меня возникают проблемы с тем, как прямоугольники будут размещены, которые я выделил в коде.

Here's the full code

Answer 1

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

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

     var datum = { 

      value: yRange2(values[i].cValue), 
      colour: values[i].color, 
      y: 0, 
      x: yOffset 

     } 

     yOffset += (datum.value); 
     data.push(datum) 
    } 

---

.attr({ 
     height: 30, 
     y: 20, 
     x: function (d) { 
      return barMARGINS.left + d.x; 
     }, 
     width: function (d) { 
      return d.value; 
     } 
    })