D3水平条形图的精确副本

Question

刚开始使用d3，需要制作水平条形图，就像项目图片中的图一样。 任何帮助，将不胜感激。 谢谢。

条形图的图像

到目前为止，我一直在研究此示例，并尝试对其进行调整以使其看起来像我所需要的。

Answer 1

这将使您入门。

您可以将数据替换为json或其他内容

data = [
    {label:"new", value:10},
    {label:"repeat", value:55},
    {label:"loyal", value:35},
];

http://plnkr.co/edit/uzRkw1bNZfQDFfQsOh4t?p=preview

Answer 2

请找到以下链接以启动水平条形图。 它是d3.v4版本。

• 更改图形边距以减小svg的大小

水平条形图