D3.js D3条形图，未显示条形图，轴在顶部

我这里有一个密码笔-

我试图在D3中创建一个简单的条形图

轴在显示，但x轴在顶部，它应该在底部，而条形图根本不显示

我知道这是一个糟糕的问题，但我看不出哪里的代码是错误的，任何帮助将不胜感激

let margin = {top: 20, right: 20, bottom:100, left:60}
let width = 800 - margin.left - margin.right
let height = 500 - margin.top - margin.bottom
let x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.5);
let y = d3.scaleLinear().range([height, 0])

let xAxis = d3.axisBottom(x)
  .tickFormat((d) => { 
    return d.x;
  });

let yAxis = d3.axisLeft(y)

let svg = d3.select('.barGraph')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(" + margin.left + "." + margin.top + ")');

d3.json('https://api.myjson.com/bins/vkbjf', (data)=>{
  x.domain(data.map((d)=>{
    return d.name
  }))

  y.domain([0, d3.max(data, (d)=>{
    return d.rank
  })]);

  svg.append('g')
    .attr('class', 'x axis')
    .attr('tranform', 'translate(0 " + height + ")')
    .call(xAxis)
    .selectAll('text')
    .style('text-anchor', 'end')
    .attr('dx', '-0.5em')
    .attr('dy', '-55em')
    .attr('y', 30)
    .attr('transform', 'rotate(-45)');

  svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 5)
    .attr('dy', '0.8em')
    .attr('text-anchor', 'end')
    .text('Member Rank')

  svg.selectAll('bar')
    .data(data)
    .enter()
    .append('rect')
    .style('fill', 'orange')
    .attr('x', (d)=>{
      return y(d.rank)
    })
    .attr('height', (d)=>{
      return height - y(d.rank)
    })
})

---

有几个问题，即，您没有为矩形定义

width

或

y

。此外，矩形高度应等于

y（值）

，而不是

height-y（值）

（这是矩形的顶部，因此矩形的

y

属性，因为svg坐标从顶部开始，y=0）。您的矩形属性可能更像：

  svg.selectAll('bar')
    .data(data)
    .enter()
    .append('rect')
    .style('fill', 'orange')
    .attr('x', (d)=>{
      return x(d.name)
    })
    .attr('height', (d)=>{
      return y(d.rank)
    })
    .attr("width",x.bandwidth())       
    .attr("y",(d)=>height - y(d.rank))
})

其次，您的转换中有不一致的引用（svg和x轴的附录分别如下）：

这就是为什么没有正确地追加这些值，而且两个值之间需要逗号

更新

   .attr('transform', 'translate(" + margin.left + "." + margin.top + ")');

   .attr('tranform', 'translate(0 " + height + ")')