Ответ 1
Вот еще один пример, похожий на mbeasley's: http://jsfiddle.net/2N2rt/15/, который добавляет ось, цвета и переворачивает правую сторону диаграммы вверх. Во-первых, я немного массировал ваши данные. Работает лучше всего, если у вас есть массив значений, и я использовал ключи, чтобы упростить доступ к свойствам name и values.
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, 10, 7, 1, 1, 11]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 17]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 13]}
];
Обычно в d3 вы настраиваете диаграмму, подобную этой, которая определяет размер фактического графика и окружающих полей.
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 640 - margin.left - margin.right,
height = 380 - margin.top - margin.bottom;
Затем вы можете создать свои шкалы на основе ваших данных. Хотя вам не нужно их создавать, они значительно упрощают позиционирование элементов на диаграмме путем преобразования значений в точки. domain - это минимальные и максимальные значения, которые имеют ваши данные, а range - минимальное и максимальное значения размера вашего графика. Обратите внимание, что range для y axis меняет направление, которое помещает (0,0) в нижний левый угол (обычно 0 для оси y находится вверху).
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.values.length - 1; })])
.range([0, width]);
var y = d3.scale.linear()
.domain([d3.min(data, function(d) { return d3.min(d.values); }),
d3.max(data, function(d) { return d3.max(d.values); })])
.range([height, 0]);
d3 имеет несколько функций для автоматического создания цветовых шкал для вас. Просто установите его с помощью клавиш, которые вы хотите использовать, и количества цветов (я думаю, что есть 10 и 20 вариантов цвета).
var color = d3.scale.category10()
.domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));
Здесь мы используем наши шкалы для установки оси x и y. Существует множество различных опций для осей. TickFormat удобен для изменения того, как выглядят тики, d3.format имеет множество разных опций, поэтому вам редко приходится создавать собственный форматировщик.
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.format('d'))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
Здесь мы создаем функцию многократного использования, которая умеет рисовать линию. Через несколько дней мы передадим каждому потоку данных для каждого человека в функцию линии. Обратите внимание, что d содержит текущий набор значений, которые мы представляем, и i - это индекс текущих значений в нашем исходном массиве данных.
var line = d3.svg.line()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
Наконец, мы можем начать добавлять вещи к нашей диаграмме, сначала создавая и позиционируя основной элемент svg.
var svg = d3.select("#chart").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", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
Мы добавляем группу (g) для каждого человека и связываем данные с группой. Мы будем использовать эти данные, когда рисуем линии. Мы предоставляем class, чтобы мы могли начертить диаграмму позже, если хотим.
var people = svg.selectAll(".people")
.data(data)
.enter().append("g")
.attr("class", "people");
Затем, наконец, нарисуйте линии для каждого человека.
people.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
Я использовал ваши данные, чтобы ответить на другой вопрос о рисовании сетки, когда у вас есть отрицательные значения. Вы можете увидеть этот график в http://jsfiddle.net/2y3er/2/.