简单的 d3.js 示例图表开始答案

【问题标题】：Simple d3.js sample chart to get started简单的 d3.js 示例图表开始
【发布时间】：2012-11-09 19:27:45
【问题描述】：

我浏览了 d3.js 网站上的所有图表示例，但它太复杂了，难以理解。我想要的只是绘制 x 轴和 y 轴并绘制一个 json 数据，如

{count:100,year:1999}
{count:240,year:2010}
{count:290,year:2009}

x 轴计数，y 轴计数。任何人都可以提供一个简单的示例来开始。

【问题讨论】：

标签： javascript canvas charts svg d3.js

【解决方案1】：

这两个沙箱有助于理解 d3 - http://phrogz.net/js/d3-playground/#VerticalBars_HTML（尽管有些示例不再适用）和 http://enjalot.com - Tributary。

这是基于您的数据的条形图的开始：http://enjalot.com/inlet/4125640/

【讨论】：

dat 看起来真的很简单。我怀疑如何控制年份条之间的差距。我的意思是 2 个特定年份的条之间的差距
尝试使用支流中的滑块更改 bar_width 以使用这些值。这个很酷！对于更复杂的示例：horses.phoebebright.com/registrations.html - 代码位于 drawYears 函数的 shared.js 中。
并且可以通过任何方式将轴值添加到 x 轴和 y 轴
尝试本教程以了解如何应用轴：alignedleft.com/tutorials/d3/axes

【解决方案2】：

这是我在 nvd3 中使用的

  [{values: 
              [{"value":3,"label":"17 hr"},
               {"value":2,"label":"18 hr"},
               {"value":1,"label":"19 hr"}]
    }];

这里label是x轴，value是y轴

【讨论】：

我认为 d3 和 nvd3 几乎是同一个图 javascript 库

【解决方案3】：

你看过this教程吗？它似乎很简单地分解它，从一个基本的图表到一个更复杂的 svg 示例。一旦这些似乎有意义，您可以尝试用您的 JSON 替换 data 变量并从那里开始。

【讨论】：