javascript - d3.js 中带有日期时间 x 轴的柱形图

Question

我是 d3.js 的初学者，正在尝试绘制带有日期时间 x 轴的柱形图。谁能帮我清除这段代码中的错误。预先感谢您的回复。

var data = [{
                "time": "01:00:00",
                "total": 1
            }, {
                "time": "01:05:30",
                "total": 2
            }, {
                "time": "02:10:00",
                "total": 1
            }, {
                "time": "03:15:30",
                "total": 3
            }, {
                "time": "04:25:30",
                "total": 1
            }, {
                "time": "07:55:15",
                "total": 4
            }, {
                "time": "12:18:00",
                "total": 1
            }, {
                "time": "17:00:00",
                "total": 5
            }];

            var margin = {
                top: 40,
                right: 40,
                bottom: 40,
                left: 40
            },
            width = 800,
            height = 500;

            var today = new Date();
            today.setHours(0, 0, 0, 0);
            var todayMillis = today.getTime();

            data.forEach(function(d) {
                var parts = d.time.split(/:/);
                var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                                       (parseInt(parts[1], 10) * 60 * 1000) + 
                                       (parseInt(parts[2], 10) * 1000);

                d.time = new Date();
                d.time.setTime(todayMillis + timePeriodMillis);
            });

            var x = d3.time.scale()
                .domain(d3.extent(data, function(d) { return d.time; }))
                .nice(d3.time.day, 1)
                .rangeRound([0, width - margin.left - margin.right]);

            var y = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0,
                     d3.max(data, function (d) {
                     return d.y;
                      })
                    ]);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient('bottom')
                .ticks(d3.time.hour, 2)
                .tickFormat(d3.time.format('%H:%M'))
                .tickSize(5)
                .tickPadding(8);

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient('left')
                .tickPadding(8)
                .tickSize(5)
                .tickSubdivide(true);

            var svg = d3.select('#plot_container').append('svg')
                .attr('class', 'chart')
                .attr('width', width)
                .attr('height', height)
                .append('g')
                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

            svg.selectAll('.chart')
                .data(data)
                .enter().append('rect')
                .attr('class', 'bar')
                .attr('x', function (d) {
                    return x(d.time);
                })
                .attr('y', function (d) {
                  return y(d.total);
                })
                .attr('width', 0)
                .attr('height', function (d) {
                  return ((height - margin.bottom) - y(d.y));
                })

            svg.append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
                .call(xAxis);

            svg.append('g')
                .attr('class', 'y axis')
                .attr('transform', 'translate(' + (margin.left) + ',0)')
                .call(yAxis);

Answer 1

您的代码有一些问题:

• 条形宽度定义为零；
• 具有未知值的 y 尺度(d.y)；
• 使用相同的未知值(d.y)的条形高度；
• y 缩放时 margin.bottom 和 margin.top 的位置错误；
• y 轴的翻译错误。

解决这些问题，代码如下:https://jsfiddle.net/3rsv3d83/2/

您仍有几个问题需要解决，但这只是一个开始。