Подтвердить что ты не робот

Как нарисовать прямую линию в d3.js(по горизонтали и вертикали)

У меня есть сомнения в построении концепции линейного графика. Может кто-нибудь объяснить эти координаты?

x1=5,x2=10,y1=10,y2=30

Пожалуйста, объясните каждый атрибут и то, что он представляет. Кроме того, пожалуйста, дайте мне представление о прямой линии по вертикали, а также по горизонтали (например, перекрестие).

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

Ответ 1

Линия представляет собой простую линию между двумя точками и описывается четырьмя обязательными атрибутами.

x1: позиция x первого конца строки, измеренная от слева от экрана.
y1: позиция y первого конца строки как измеряется от верхней части экрана.
x2: положение x второй конец линии, измеренный слева от экрана.
y2: Позиция y второго конца линии, измеренная сверху экрана.

Ниже приведен пример раздела кода, необходимого для рисования строки;

holder.append("line")          // attach a line
    .style("stroke", "black")  // colour the line
    .attr("x1", 100)     // x position of the first end of the line
    .attr("y1", 50)      // y position of the first end of the line
    .attr("x2", 300)     // x position of the second end of the line
    .attr("y2", 150);    // y position of the second end of the line

Это приведет к следующей строке:

Линия простирается от точки 100,50 до 300,150 (x1, y1-x2, y2).

Вы можете увидеть это в большем контексте здесь.

Это не распространяется на пример с поперечными волосами, но как только вы понимаете вышеприведенную часть, он должен быть более ясным.

Ответ 2

Для рисования линии нам нужны две точки, в графе, если мы хотим ссылаться на любую точку, мы используем координаты, (x1, y1) - начальная точка строки (x2, y2) - конечная точка строка, эти две точки связаны.

Чтобы нарисовать сетку в графе, ссылайтесь на эту ссылку http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html Если вы не понимаете, спросите .Okay