Ориентация и правильная размерная строка стека

Question

Поскольку я новичок в программировании JavaScript с использованием D3. До сих пор мне удалось превратить эту graph по оси X, но вопрос в том, как я могу настроить панель стека на оси х вместо него быть с ног на голову в следующем коде:

series = dataset.map(function (d) { 
     return d.name; 
    }); 

    dataset = dataset.map(function (d) { 
     return d.data.map(function (o, i) { 
      // Structure it so that your numeric 
      // axis (the stacked amount) is y 
      return { 
       y: o.count, 
       x: o.month 
      }; 
     }); 
    }); 

stack = d3.layout.stack(); 

stack(dataset); 

console.log(dataset); 
svg = d3.select('body') 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 


yMax = d3.max(dataset, function (group) { 
     return d3.max(group, function (d) { 
      return d.y + d.y0; 
     }); 
    }); 
yScale = d3.scale.linear() 
     .domain([0, yMax]) 
     .range([0, height]); 


months = dataset[0].map(function (d) { 
     return d.x; 
    }); 
xScale = d3.scale.ordinal() 
     .domain(months) 
     .rangeRoundBands([0, width], .1); 

xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom'); 


colours = d3.scale.category10(); 
groups = svg.selectAll('g') 
     .data(dataset) 
     .enter() 
     .append('g') 
     .style('fill', function (d, i) { 
     return colours(i); 
    }); 
rects = groups.selectAll('rect') 
     .data(function (d) { 
     return d; 
    }) 
     .enter() 
     .append('rect') 
     .attr('y', function (d,i) { 
     return yScale(d.y0); 
    }) 
     .attr('x', function (d) { 
     return xScale(d.x); 
    }) 
     .attr('height', function (d) { 
     return xScale(d.x); 
    }) 
     .attr('width', function (d) { 
     return xScale.rangeBand(); 
    }); 


svg.append('g') 
    .attr('class', 'axis') 
    .attr("transform", "translate(0," + (height-padding) + ")") 
    .call(xAxis); 

Не забыть, что я использовал те же данные this.

Answer 1

Следующий код должен выводить строки, которые я запросил выше.

var xScale = d3.scale.linear() 
    .domain([d3.min(Germany, function (d) { 
     return d[0] 
    }),d3.max(Germany, function (d) { 
     return d[0] 
    })]) 
    .range([padding, w-padding]); 
//var yScale = d3.scale.linear() 
// .domain([d3.min(newdict1, function (d) {return d[1];}),d3.max(newdict1, function(d) { return d[1];})]) 
// .range([h - padding, padding]); 

var yScale = d3.scale.linear() 
    .domain([d3.min(latestdict, function (d) { 
     return d[1] 
    }), d3.max(latestdict, function (d) { 
     return d[1] 
    })]) 
    .range([h-padding, padding]); 


var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("Bottom") 
    .ticks(10); 


var line = d3.svg.line() 
    .x(function(d) { return xScale(d[0]); }) 
    .y(function(d) { return yScale(d[1]); }) 
    .interpolate("basis");