d3js：无法在轴内放置水平条

Question

我正在学习从头开始在d3中制作图表，而无需接受其他人的代码并对其进行修改。我可以成功创建一个x＆y轴垂直条形图。但是，当要将同一张图表转换为水平条形图时，我最终陷入了混乱。到目前为止，这是我的代码：

@SendTo

非常感谢您。

Answer 1

您需要在代码中进行很多更改。

TL; DR

• 将数组中的value更改为population
• 比例尺用于将值转换为像素比例值
• height是元素的垂直大小。您应该使用yScale(d.name)
• width是元素的水平尺寸。您应该使用xScale(d.population)
• y是元素的垂直位置。您应该使用yScale.bandwidth()
• x是元素的垂直位置。您应该使用0
• 在新附加的selectAll("rect")上使用g或svg元素与具有轴的同一g元素
• 添加fill属性，使您的矩形具有颜色

您已将人口字段标记为value，但您正在通过代码调用population来使用它。因此，将值替换为数据对象中的填充。

接下来，您需要更改设置区域的方式。在svg元素上直接使用selectAll或在g元素上附加另一个svg并在该元素上添加rects。现在，您的代码尝试将rect添加到与x轴相同的g元素中。

确保正确设置rect的属性。高度是rect元素的大小，而不是位置。 y是矩形从顶部向下垂直的位置。这意味着height属性应该使用yScale(d.name)，而width应该使用xScale(d.population)，因为它们是矩形或rect元素的宽度和长度。 x和y是元素从svg的左上角开始的坐标位置。使用它们来确定矩形左上像素的开始位置。您应该将y设置为yScale.bandwidth()，将x设置为0。