Javascript 如何在d3.js中绘制直线（水平和垂直）

我对画线图的概念有疑问。有人能解释这些坐标吗

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

请解释每个属性及其代表的内容。另外，请给我一个关于垂直和水平画一条直线的想法（像十字线）

---

我是d3.js图形的新手，所以请帮助我。任何帮助都将不胜感激。

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

---

要在图形中绘制网格，如果您不理解，请参考此链接，然后询问。好的

直线是两点之间的简单直线，由四个必需属性描述

• x1：线的第一个端点的x位置，从 屏幕左侧
• y1：线路第一端的y位置 从屏幕顶部测量
• x2:x轴的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延伸到300150（x1，y1到x2，y2）

你可以在更多的上下文中看到它

---

这不包括十字线的例子，但一旦你理解了上面的部分，它应该会更清晰。

你能解释一些关于线坐标以及d3.js如何用点绘制它的更多信息吗？@divakar，看一看。向下滚动到“创建行”部分。是的，这非常有用，我只阅读了你的d3.js博客。也许你更愿意为css样式添加一个类，而不是内联样式：

holder.append（“行”）.attr（“class”，“sigmaline”）.[…]

。只需在文档中

持有者所在的位置添加一个
块。通过
包含的外部css资源似乎不起作用。@d3noob，你介意帮我看看这个问题吗？为什么我们一个使用
样式
，另一个使用
attr
？我喜欢认为元素的属性是对象的一个特征，而不需要定义它，和/或可能影响对象在页面上的位置或方向。有一个强有力的论据可以说，风格可以被视为跨越属性，我同意。我喜欢认为可以使用select和attr在网页上选择和排列元素，但一旦元素出现，其外观的变化就取决于样式。