javascript - 如何在d3中翻转条形图

Question

我在翻转我的酒吧时遇到了麻烦。看起来它们正在“增长”但在 x 轴下。我知道在 SVG 中，（0,0）坐标位于左上角，我设法将它们带到了我的 SVG 的底部，但我该如何改变我的条形图从 x 轴下方到轴上方的方向？

var formatYear = d3.timeFormat("%Y");

var svg = d3.select("svg"); // calling svg 
const width = +svg.attr('width'); // width of svg container
const height = +svg.attr('height'); // height of svg container

var padding = 30
// create d3 data join

// load csv file 
d3.csv("q3.csv").then(data => {
data.forEach(d => {
  d.year = d.year; // need to format year
  d.running_total = +d.running_total // format to number
});
render(data);
});


const render = data => {
const yValue = d => d.running_total;
const xValue = d => d.year;
const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
};

const xScale = d3.scaleBand()
  .domain([0, data.map(xValue)])
  .range([0, width])
// Line 38
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, yValue)])
  .range([0, height])
console.log(yScale.domain())


//      const g = svg.append('g')
//          .attr('transform','translate(${margin.left},${margin.top})'
// );

svg.selectAll('rect').data(data)
  .enter().append('rect') // Line 47
  .attr('x', d => yValue(d))
  .attr('y', height) // Line 48
  .attr('height', d => yValue(d)) // Line 49
  .attr('width', 5);


};

在 Andrew 的建议之后如何看待：

标签： javascripthtmld3.jssvg