使用字典在 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>