如何使用 d3.js 创建类似 StackOverflow 信誉图的图表？

Question

我是 d3.js 的新手。虽然我觉得它很酷，但它的样本比我需要的更复杂！我只想有一个简单的图表来显示前 10 个月的销售量。

一个二维图表，横轴包含月份，纵轴显示交易量。

问题：有没有更简单的方法来使用 d3.js，也许是图书馆或类似的东西？

Answer 1

您可以使用 nvd3.js，他们在 d3.js 之上添加了一层，这使得构建图表变得非常简单。

这是您想要的示例：

var data = [{
  "key": "Sales",
  "values": [
    { x:1, y: 132 }, 
    { x:2, y: 121 }, 
    { x:3, y: 153 }, 
    { x:4, y: 146 }, 
    { x:5, y: 163 }, 
    { x:6, y: 182 }, 
    { x:7, y: 178 }, 
    { x:8, y: 179 },
    { x:9, y: 181 },
    { x:10, y: 178 }
  ]
}]

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .margin({left: 100})
    .useInteractiveGuideline(true)
    .transitionDuration(350)
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);


  chart.xAxis.axisLabel('Month');
  chart.yAxis.axisLabel('Sales in Milions');

  d3.select('#chart svg').datum(data).call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

#chart svg {
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<link href="http://nvd3.org//assets/css/nv.d3.css" rel="stylesheet">
<div id="chart">
    <svg> </svg>
</div>

如何使用 d3.js 创建类似 StackOverflow 信誉图的图表？

How to create a graph like StackOverflow reputation graph using d3.js?

javascript

charts

graph

d3.js