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信誉图的图形？

1 个答案: