Question

我在这里有一个codepen - https://codepen.io/ttmtsimon/pen/EbPgrw

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

显示轴但x轴位于顶部，它应位于底部，并且条形图根本不显示。

我知道这是一个糟糕的问题，但我看不出代码错在哪里，任何帮助都会受到赞赏。

ec2_create

Answer 1

有一些问题，即您没有为矩形定义width或y。此外，矩形高度应该等于y(value)而不是height-y(value)（这是矩形的顶部，因此是矩形的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 + ")')

这就是为什么这些没有被正确追加的原因，你也需要两个值之间的逗号。

更新了pen。

D3条形图，条形图未显示，轴顶部

1 个答案: