D3水平条形图的精确副本

Question

Just started working with d3 and need to make a horizontal bar chart exactly like the one in the image for a project. 刚开始使用d3，需要制作水平条形图，就像项目图片中的图一样。 Any help would be appreciated. 任何帮助，将不胜感激。 Thanks. 谢谢。

Image of bar chart 条形图的图像

So far I have been working through this example and trying to adapt it to look like what I need. 到目前为止，我一直在研究此示例，并尝试对其进行调整以使其看起来像我所需要的。

Answer 1

This will get you started.... 这将使您入门。

You can replace the data with some json or something 您可以将数据替换为json或其他内容

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

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

Answer 2

Please find the below link to start the horizontal bar chart. 请找到以下链接以启动水平条形图。 it's in d3.v4 version. 它是d3.v4版本。

change the graph margin to reduce the size of svg 更改图形边距以减小svg的大小

HorizontalBarChart 水平条形图

D3水平条形图的精确副本

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-09-21 02:00:58

解决方案2
0 2016-09-21 04:51:13

D3水平条形图的精确副本

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-09-21 02:00:58

解决方案2 0 2016-09-21 04:51:13

解决方案1
1 已采纳 2016-09-21 02:00:58

解决方案2
0 2016-09-21 04:51:13