Question

在https://bl.ocks.org histogram example的帮助下，我尝试使用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();
    });
});

我没有看到任何我做错的事。

Answer 1

如果没有您的实际数据，我将无法测试此代码...但是，您的直方图调用函数似乎从数据中返回了错误的值。代码不应该返回d.length，而不是代码：

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

这样，直方图会将每个数据点放入由日期确定的bin中吗？

D3.js 4直方图与AJAX的JSON

1 个答案: