Question

我正在尝试创建救护车响应时间的直方图（以秒为单位）。来自D3.js的示例代码非常有效。我能够轻松地组合一个漂亮的直方图。它甚至可以将响应时间（以秒为单位）转换为mm：ss格式。我想要完成并需要你帮助的是这个; 如何使垃圾箱为60秒（1分钟）如果您运行以下代码，您将看到垃圾箱的增量为50秒。这对大多数人来说是不直观的。你会如何指定垃圾箱的确切数量？对于响应时间，我希望垃圾箱是1分钟（60秒），但对于在医院卸载病人我希望垃圾箱间隔5分钟（300秒）。在这种情况下，我想请求您帮助使箱子成为精确值。下面显示的是我的数据代码：

<!DOCTYPE html>

body {
    font: 10px sans-serif;
}

.bar rect {
    fill: thistle;
    shape-rendering: crispEdges;
}

.bar text {
    fill: black;
}

.axis path, .axis line {
    fill: none;
    stroke: cornsilk;
    shape-rendering: crispEdges;
}

    var values = [212,
        279,
        264,
        411,
        189,
        343,
        207,
        424,
        550,
        302,
        317,
        315,
        29,
        227,
        367,
        163,
        581,
        96,
        375,
        313,
        548,
        570,
        329,
        269,
        953,
        238,
        195,
        183,
        384,
        353,
        258,
        465,
        208,
        273,
        155,
        344,
        355,
        354,
        88,
        364,
        143,
        407,
        207,
        437,
        142,
        234,
        234,
        193,
        308,
        416,
        445,
        327,
        293,
        327,
        232,
        319,
        209,
        498,
        236,
        427,
        241,
        164,
        0,
        157,
        295,
        337,
        430,
        218,
        390,
        231,
        402,
        301,
        472,
        349,
        133,
        311,
        396,
        452,
        490,
        189,
        282,
        297,
        296,
        413,
        102,
        219,
        190,
        371,
        390,
        454,
        467,
        302,
        221,
        547]
    // Formatters for counts and times (converting numbers to Dates).
    var formatCount = d3.format(",.0f"),
            formatTime = d3.time.format("%H:%M"),
            formatMinutes = function (d) {
                return formatTime(new Date(2012, 0, 1, 0, d));
            };
    //this is the positioning of the chart
    var margin = {top: 30, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
            .domain([0, 600])
            .range([0, width]);

    // These are the number of bins in the histogram.
    var data = d3.layout.histogram()
            .bins(x.ticks(10))
            (values);

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

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(formatMinutes);

    var svg = d3.select("body").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 + ")");

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

    bar.append("rect")
            .attr("x", 1)
            .attr("width", x(data[0].dx) - 1)
            .attr("height", function (d) {
                return height - y(d.y);
            });
    //this block of code makes the tick values showing how many fall into the bin
    bar.append("text")
            .attr("dy", ".75em")
            .attr("y", 6)
            .attr("x", x(data[0].dx) / 2)
            .attr("text-anchor", "middle")
            .text(function (d) {
                return formatCount(d.y);
            });

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
</script>

Answer 1

我会这样做。首先，手动计算您的刻度：

image.animate().xBy(screenWidth).setDuration(5000).start();

这将创建一个数组：

Date.new(2016,9,14).strftime('%b%d.%Y')

然后将其提供给var ticks = d3.range(0, x.domain()[1] + 1, 60);：

[0, 60, 120, 180, 240, 300, 360, 420, 480, 540, 600]

最后修正轴刻度：

d3.histogram

所有在一起：

＆＃13;

var data = d3.layout.histogram()
  .bins(ticks)
  (values);

＆＃13;

D3.js直方图箱尺寸增量

1 个答案: