Вопрос
Я пытаюсь написать учебник о D3, и я нашел пару веб -сайтов, которые могут помочь, но с недостаточно деталями.
У меня есть следующий код, который выводит гистограмму:
<html>
<head>
<div id="mainGraph">
</div>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">
var t = 1, // start time (seconds since epoch)
v = 0, // start value (subscribers)
data = d3.range(33).map(next); // starting dataset
function next() {
return {
time: ++t,
value: v = ~~Math.max(10, Math.min(80, v + 3 *( Math.random() - .5))
};
}
setInterval(function() {
data.shift();
data.push(next());
}, 1500);
var w = 40,
h = 100;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, w]);
var y = d3.scale.linear()
.domain([0, 100])
.rangeRound([0, h]);
var chart = d3.select("body")
.append("svg:svg")
.attr("class", "chart")
.attr("width", w * data.length + 10)
.attr("height", h);
chart.selectAll("rect")
.data(data)
.enter().append("svg:rect")
.attr("x", function(d, i) { return x(i) + 5; })
.attr("y", function(d) { return h - y(d.value) + 5; })
.attr("width", w)
.attr("height", function(d) { return y(d.value); });
chart.append("svg:line")
.attr("x1", 0)
.attr("x2", w * data.length)
.attr("y1", h + 5)
.attr("y2", h + 5)
.attr("stroke", "#000");
</script>
</body>
</html>
Проблема, с которой я сталкиваюсь сейчас, заключается в том, что я пытаюсь изменить набор данных, поэтому я пытаюсь поместить v функции t, например, v = math.exp (t) Это не работает, и она дает мне черную линию только даже даже Хотя я изменил интервал Макса и Мин. Спасибо.
Решение
setInterval(function() {
data.shift();
data.push(next());
}, 1500);
setInterval
заставляет код запускать каждые 1,5 секунды
data.shift();
Удаляет первый элемент массива data
(который заполнен случайными числами)
data.push(next());
Вставляет новое случайное значение в конце массива. next()
это функция, которая генерирует случайные числа.
Итак, в итоге, data.push(next());
встает новое случайное значение в конце массива data
Другие советы
Я рекомендую вам рассмотреть вопрос о фиксированных данных для вашего учебника, а не использование генератора чисел. Чаще всего, что пользователи графиков генерируют данные отдельно, а затем передают данные в инструмент диаграммы. Я всегда нахожу это полезным для этого.
Общий формат ввода данных-использование формата строкости D3.CSV ...
var dataSet1 = [
{xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
{xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
{xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
{xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
{xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
{xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
{xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];
У меня есть рабочий пример на GitHub под названием "Многочисленные вертикальные схемы, смешанные с общими конструкциями макета HTML."
Одна вещь, которую я хотел бы попытаться приступить к работе, - это использовать события для управления такими вещами, как выделение определенных стержней в диаграмме, когда я использую текстовые легенды справа от графика. Если вы знаете, как это сделать, пожалуйста, не стесняйтесь уточнить.
Надеюсь, это поможет.
Откровенный