javascript - d3 - 了解 d3.svg.line 的文档

Question

我一定错过了一些非常简单的东西。我想使用d3.svg.line在两点之间画一条线。文档如下:

svg:line x1="0" y1="0" x2="0" y2="0" The line element defines a line segment that starts at one point and ends at another. The first point is specified using the x1 and y1 attributes, while the second point is specified using the x2 and y2 attributes. The line element is a popular choice for drawing rules, reference lines, axes and tick marks.

我不明白(鉴于文档中缺乏内联示例)x1、y1、x2 和 y2 如何适应图片。我看到的所有使用 d3.svg.line 的示例根本没有使用它们，而是使用数据数组和函数在多个点之间绘制一条线(例如 http://jsfiddle.net/5e2HD/1/ 和 https://www.dashingd3js.com/svg-paths-and-d3js )。

每当我尝试以任何方式使用 x1、x2、y1 和 y2(例如，将它们设置为行上的属性、将它们作为函数调用、将它们作为参数传递等)时，我都会收到错误。您将如何使用 d3.svg.line 来简单地在两点之间创建一条直线，正如文档似乎表明的那样？

Answer 1

var svg = d3.select("body").append("svg")
.attr("宽度", 500)
.attr("高度", 500);
svg.append("line").attr("x1",200).attr("y1",200).attr("x2",400).attr("y2",400).attr("样式","描边:rgb(255,0,0);描边宽度:2")