javascript - 在 D3.js 中使用字典绘制图表

Question

我有一本以下形式的字典:

[('2019-10', 273), ('2019-11', 299), ('2019-12', 244), ('2020-01', 231), ('2020-02', 232)]

我想将此字典绘制为图表，其中日期为 x 轴，相应的值为条形。我怎样才能实现这个目标？我是D3的新手，因此对其了解甚少。如有任何帮助，我们将不胜感激!

Answer 1

假设您的数据采用以下格式:

[{'2019-10': 273}, {'2019-11': 299}, {'2019-12': 244}, {'2020-01': 231}, {'2020-02': 232}]

您可以首先应用一些映射函数将其转换为更方便的格式，然后从那里开始，例如:

var height = 200;
var width = 400;

var data = [{'2019-10': 273}, {'2019-11': 299}, {'2019-12': 244}, {'2020-01': 231}, {'2020-02': 232}];

var mapped = data.map(d => {
  return {
    date: Object.keys(d)[0],
    count: d[Object.keys(d)[0]]
  }
});

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);

x.domain(mapped.map(d => d.date));
y.domain([0, d3.max(mapped, d => d.count)]);
  
var svg = d3.select("#simple").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("bar")
    .data(mapped)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", d => x(d.date))
      .attr("width", x.rangeBand())
      .attr("y", d => y(d.count))
      .attr("height", d => height - y(d.count));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="simple"></div>