如何使用 d3.js 创建像 StackOverflow 信誉图这样的图？答案

【问题标题】：How to create a graph like StackOverflow reputation graph using d3.js?如何使用 d3.js 创建像 StackOverflow 信誉图这样的图？
【发布时间】：2015-05-17 05:28:58
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript d3.js graph charts

【解决方案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>

【讨论】：

太棒了...是否可以重新调整大小的图表？所以它占据了它的容器让它拥有的整个空间？
是的，您只需在代码中添加nv.utils.windowResize(chart.update);。我编辑了我的答案以包括这个。请考虑支持我的回答:)