如何在d3.js中绘制直线(水平和垂直)

Question

我对绘制线图概念有疑问.任何人都可以解释这些坐标吗？

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

请解释每个属性及其代表的含义.另外,请给我一个关于垂直和水平画直线(如十字线)的想法.

我是d3.js图表​​的全新手,所以请帮助我.任何帮助,将不胜感激.

Answer 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).

您可以在更多的方面看它在这里.

这不包括十字准线的例子,但是一旦你理解了上面的部分它应该更清楚.