Ступенчатая диаграмма с D3.js с отдельными линиями

Я новичок в D3 и хочу нарисовать диаграмму Stepline. Но не как путь! Мне нужны отдельные линии, поэтому мне нужна ступенчатая линия «вручную». Мой вопрос: как рисовать вертикальные линии?

Я рисую горизонтальные линии следующим образом:

var g = svg.append("g").attr("class", "line");
g.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", function(d,i) { return x(d[0]);})
.attr("y1", function(d,i) { return y(d[1]);})
.attr("x2", function(d,i) { return x(d[2]);})
.attr("y2", function(d,i) { return y(d[1]);})
.attr("class", "line")
.style("stroke", "black")

Мой набор данных выглядит так (пример):

[
'2011-01-04T00: 00: 00.000',
6975.35009765625,
'2011-01-03T00: 00: 00.000',
6989.740234375
],
[
'2011-01-05T00: 00: 00.000',
6939.81982421875,
'2011-01-04T00: 00: 00.000',
6975.35009765625
],

So:

d[0] = actual date
d[1] = actual data
d[2] = previous date
d[3] = previous data

И теперь я пытаюсь выяснить, в каком направлении мне нужно провести вертикальную линию до следующего значения x. Если следующее значение x выше, линия должна идти вверх, если следующее значение x ниже, линия должна идти вниз.

Может ли кто-нибудь помочь мне, пожалуйста.


charts d3.js linechart
person maker23    schedule 03.06.2013    source источник
comment
Рассматривали ли вы возможность использования генератора строк со ступенчатой ​​интерполяцией? См. документацию.   -  person Lars Kotthoff    schedule 03.06.2013
comment
Метод интерполяции только для элементов пути или нет?!   -  person maker23    schedule 03.06.2013
comment
Да. Я говорю о том, что вы можете добиться того же эффекта с помощью генератора одной линии (или пути) вместо того, чтобы рисовать все сегменты по отдельности.   -  person Lars Kotthoff    schedule 03.06.2013
comment
Я знаю, но мне нужна для каждого шага/галочки отдельная строка, потому что каждая строка будет отформатирована индивидуально.   -  person maker23    schedule 03.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

По сути, он у вас уже есть — ваш код должен быть примерно таким

.attr("x1", function(d) { return x(d[0]); })
.attr("y1", function(d) { return y(d[1]); })
.attr("x2", function(d) { return x(d[0]); })
.attr("y2", function(d) { return y(d[3]); })

Вам не нужно проверять, идет ли линия вверх или вниз, поскольку это подразумевается в координатах.

person Lars Kotthoff    schedule 03.06.2013