使用字典在 D3.js 中绘制图形

Question

I have a dictionary of the form:

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

I want to plot this dictionary as a graph, with the dates as the x axis and the corresponding values as the bars. How can I achieve this? I am new to D3, hence have very little knowledge of it. Any help is appreciated!

Answer 1

Assuming that your data is in the format:

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

You could first apply some mapping function to transform this into a more convenient format and go from there, eg:

 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>