D3.js 4直方图，带有来自AJAX的JSON

在来自的帮助下，我尝试使用AJAX中的JSON创建直方图

似乎我的数据不适合直方图（）函数

开发工具中的我的数据（顶部=我的数据；底部=直方图中的箱子）：

我的数据不在直方图箱中。缺少阵列对象

以下是bl.ocks.org工作示例中的数据：

…以及bl.ocks.org直方图中的箱子示例：

你可以看得很清楚。在我的实验中，数据不在箱子里。在bl.ocks.org的工作示例中，您可以在直方图箱中看到索引1到13之间的数组形式的附加对象

以下是我的完整源代码：

$(function () {
    var updateStatistic = function () {
        var dateFrom = $('#date_from').val();
        var dateTo = $('#date_to').val();

        var parseDate = d3.timeParse('%Y-%m-%d %H:%M:%S'), formatCount = d3.format(',.0f');
        var margin = {top: 10, right: 10, bottom: 20, left: 10},
                width = 1800 - margin.left - margin.right,
                height = 200 - margin.top - margin.bottom;

        var dataset = [];
        d3.json('/statistic-sizearchive/' + dateFrom + '/' + dateTo, function (data) {
            dataset = data.sizeArchive;
            dataset.columns = ['date'];

            var datetimeFrom = parseDate(dataset[0].archive_time_sql);
            var datetimeTo = parseDate(dataset[dataset.length - 1].archive_time_sql);

            $(dataset).each(function (index, element) {
                element.date = parseDate(element.archive_time_sql);
                delete element.archive_time_sql;
            });

            console.log(dataset);

            var x = d3.scaleTime()
                    .domain([datetimeFrom, datetimeTo])
                    .rangeRound([0, width]);
            var y = d3.scaleLinear()
                    .range([height, 0]);

            var histogram = d3.histogram()
                    .value(function (d) {
                        return d.length;
                    })
                    .domain(x.domain())
                    .thresholds(x.ticks(d3.timeWeek));

            var bins = histogram(dataset);
            console.log(bins);

            y.domain([0, d3.max(bins, function (d) {
                    return d.length;
                })]);

            /*
             * ### SVG
             */
            var svg = d3.select('#statistic_size_archive').append('svg')
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            svg.append("g")
                    .attr("class", "axis axis--x")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(x));

            var bar = svg.selectAll(".bar")
                    .data(bins)
                    .enter().append("g")
                    .attr("class", "bar")
                    .attr("transform", function (d) {
                        return "translate(" + x(d.x0) + "," + y(d.length) + ")";
                    })
                    ;

            bar.append("rect")
                    .attr("x", 1)
                    .attr("width", function (d) {
                        return x(d.x1) - x(d.x0); // x(d.x1) - x(d.x0) - 1
                    })
                    .attr("height", function (d) {
                        return height - y(d.length); // height - y(d.length)
                    });

            bar.append("text")
                    .attr("dy", ".75em")
                    .attr("y", 0)
                    .attr("x", function (d) {
                        return (x(d.x1) - x(d.x0)) / 2;
                    })
                    .attr("text-anchor", "middle")
                    .text(function (d) {
                        return formatCount(d.length);
                    });
        });
    };
    updateStatistic();

    $('button#update_statistic').click(function () {
        updateStatistic();
    });
});

---

我看不出我做错了什么。

没有您的实际数据，我无法测试此代码。。。但是，直方图调用函数似乎从数据返回了错误的值。与其返回

d.length

，代码不应该是：

    var histogram = d3.histogram()
            .value(function (d) {
                return d.date;
            })
    ...

这样，直方图将把每个数据点放入一个由其日期确定的bin中