javascript - 如何在 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 .

这不包括十字线示例，但是一旦您理解了上面的部分，它应该会更清楚。