Я пытаюсь создать гистограмму времени отклика скорой помощи (в секундах). Пример кода из D3.js работает очень хорошо. Я могу легко собрать хорошую гистограмму. Он даже преобразует время отклика в секундах в формат mm: ss. То, что я пытаюсь выполнить и нуждаюсь в вашей помощи, - это; Как сделать бункеры 60 секунд (1 минута) Если вы запустите следующий код, вы увидите, что урны составляют 50 секунд. Это неинтуитивно для большинства людей. Как бы вы указали точное количество для ящиков? Для времени ответа я хочу, чтобы ящики были 1 минута (60 секунд), но для выгрузки пациента в больнице я хотел бы, чтобы ящики были с интервалом в 5 минут (300 секунд). В любом случае, я хотел бы попросить вас помочь сделать бункеры точными значениями. Ниже показан мой код с данными:Увеличение размера гистограммы D3.js
<!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>
Спасибо Марк. Это именно то, что я искал! Ваш ответ работает отлично. –
Теперь как указать это сообщение как готовое? Раньше был флаг, указывающий на ответ на вопрос; но я этого не вижу. –
@DavidFortMyers, добро пожаловать. Чтобы принять ответ, нажмите галочку в верхней части моего ответа. – Mark