javascript - 使用 D3 制作没有 mustache 的彩色箱线图

标签 javascript css graph d3.js bullet-chart

我是 D3 的新手,希望使用类似于 Glassdoor 使用的图表来显示不同服务的一系列价格(最低价格、中间价格、最高价格)(请参阅此示例: http://bit.ly/1koKeLL )。

enter image description here

这是一个水平条形图,左右边距可变,以便以图形方式显示低、中值和高数据点。有谁知道实现这个的最佳方法,特别是对于刚刚学习 D3 的人?

最佳答案

我认为这个人很好地实现了一个比你的图表更复杂的图表:

Bullet Chart in D3

enter image description here

但是,如果您想了解 D3,并以智能且高效的方式使用它,我强烈的建议是:

不要走捷径。

这意味着在开始实现任何内容之前,您至少要阅读一篇好的教程,并至少简要浏览一下 D3 文档。

一个很好的教程是here 。完成全部 20 节类(class)。在本地计算机上实现所有示例。您可以在几天内完成。然后你才回到你的例子。

不要被网上找到的故事所诱惑,比如“我昨天开始使用 D3,现在我创建了最疯狂的可视化”。它们要么是谎言,要么是无知。

关于javascript - 使用 D3 制作没有 mustache 的彩色箱线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20980883/

相关文章:

javascript - 如何使用 Cropper 通过 javascript 检索 toDataURL 字符串 by fengyuanchen

javascript - 根据条件更改按钮的样式(使用 KnockoutJS)

python - 将 dict 的键和值从 str 转换为 Unicode 的最快方法?

java - OrientDB ETL导入: 'skip' operator throws exception

r - 使用plot()然后使用lines()时,线条未显示在R的折线图上

javascript - 通过 javascript 操作 PDF

javascript - 在 Symfony2 项目中将 JavaScript 文件放在哪里?

javascript - 使用 JavaScript 替换和匹配方法时允许第一位数字为 0

html - 垂直居中文本 : inline-block div next to text

jQuery 生成框并在之后提供 css 样式