javascript - 如何使用 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>