Неожиданные точки графика в d3.js

Я получаю неожиданные сюжетные точки в d3.js. Я начинаю с:Неожиданные точки графика в d3.js

var lineData = [13, 16, 2];

Затем массаж в:

[{x: 0, y: 24.375}, 
{x: 55, y: 30}, 
{x: 110, y: 3.75}]

Но по какой-то причине, диаграммы, которые я создаю, не похоже, что это соответствует этой информации на всех. Я, наверное, пропустил что-то простое, но я не могу на него наложить. Любая помощь приветствуется.

Кроме того, я не удивлюсь, если есть лучший способ «d3» для массажа данных, как я намереваюсь. Бонусные баллы, если вы можете указать, как код может быть улучшен;)

Я создал JS скрипку: http://jsfiddle.net/matrym/qbDhq/1/

источник

2013-11-12 b-b

Ваши очки нанесены «правильно». Вероятно, несколько вещей отбрасывают вас: 1) Происхождение находится в верхнем левом углу, а не внизу справа, поэтому все ваши значения Y строятся относительно верхней части '', а не снизу, как обычно ожидают , 2) svg не находится в верхней части его содержащего div, поэтому вводится дополнительное смещение. – meetamit

Проблема заключается в том, что в SVG, у координаты отсчитываются от вершины, а не дно. Таким образом, 0 является вершиной. Вы хотите вернуть chartHeight - d.y в свою функцию линии.

Что касается других улучшений, вы можете использовать шкалу для вычисления значений y непосредственно из данных. Путь D3 состоял в том, чтобы привязать данные к добавленному элементу path, а затем просто передать функцию линии вместо прямого вызова.

Все это и несколько мелких вещей here.

источник

2013-11-12 17:51:12

Неожиданные точки графика в d3.js

ответ

Смежные вопросы