Question

我按照https://www.d3-graph-gallery.com/graph/barplot_grouped_basicWide.html上的示例绘制了一个图形。我使用了自己的数据集 / *月，莱塞迪，meter1，meter2 一月200，300，400 二月350，400，500 三月，550，200，450 四月，400，240，280 * / 我能够画出这些条，但它们不在正确区域中

我尝试使用x和y属性，但无济于事

var width=+svg.attr('width')
var height=+svg.attr('height')
var margin= {top: 20, right:20, bottom:20, left:50}
var innerWidth= width-margin.left-margin.right;
var innerHeight=height-margin.top-margin.bottom;

d3.csv('stack.csv')
.then(function(data){
// now the axis
var TelsecopeNames= data.columns.slice(1)

var groups= data.map(function(d){return d.Months})
console.log(TelsecopeNames)
console.log(groups)

var xscale= d3.scaleBand()
.domain(groups)
.range([0,innerWidth])
.padding(0.2)

var yscale=d3.scaleLinear()
.domain([0,600])
.range([innerHeight,0])
.nice()

var xSubgroup = d3.scaleBand()
.domain(TelsecopeNames)
.range([0, xscale.bandwidth()])
.padding([0.05])
// color palette = one color per subgroup
var color = d3.scaleOrdinal()
.domain(TelsecopeNames)
.range(['#e41a1c','#377eb8','#4daf4a'])

var xAxis=svg.append('g')
.classed('xAxis',true)
.attr('transform',`translate(${margin.left},${innerHeight+margin.top})`)
.call(d3.axisBottom(xscale))

var yAxis= svg.append('g')
.classed('yAxis',true)
.attr('transform',`translate(${margin.left},${margin.top})`)
.call(d3.axisLeft(yscale))

//now for the bars
svg.append("g")
.selectAll("g")
// Enter in data = loop group per group
.data(data)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + xscale(d.Months) + ",0)"; })
.selectAll("rect")
.data(function(d) { return TelsecopeNames.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect")
  .attr("x", function(d) { return xSubgroup(d.key); })
  .attr("y", function(d) { return yscale(d.value); })
  .attr("width", xSubgroup.bandwidth())
  .attr("height", function(d) { return height - yscale(d.value); })
  .attr("fill", function(d) { return color(d.key); });
  console.log(svg.attr('fill'))
})

我希望看到x轴上的条按正确的类别分组

以正确的比例放置图表的绘制条

0 个答案: