如何在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）。

您可以在更多背景here中看到它。

这并不涵盖十字线的例子，但是一旦你理解了上面的部分就应该更清楚。

Answer 2

要绘制一条线，我们需要两个点，在图中如果我们想要引用我们使用坐标的任何点，（x1，y1）是一条线的起点（x2，y2）是一个终点。一条线，这两点是相连的。

要在图表中绘制网格，请参阅此链接http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html如果您不理解，请询问。好吧