d3 - 了解 d3.svg.line 的文档答案

【问题标题】：d3 - understanding the documentation for d3.svg.lined3 - 了解 d3.svg.line 的文档
【发布时间】：2015-02-25 05:05:00
【问题描述】：

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

svg:line x1="0" y1="0" x2="0" y2="0" 线元素定义了从一个点开始并在另一个点结束的线段。第一个点使用 x1 和 y1 属性指定，而第二个点使用 x2 和 y2 属性指定。线元素是绘制规则、参考线、轴和刻度线的流行选择。

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

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

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

var svg = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500); svg.append("line").attr("x1",200).attr("y1",200).attr("x2",400).attr("y2",400).attr("style","stroke:rgb(255,0,0);stroke-width:2")

【讨论】：

这不使用我上面链接到的 d3.svg.line 路径 - 我特意询问如何通过使用 d3.svg.line 构建的路径来创建“线” ()。
d3.svg.line() 是一个路径生成器函数，您可以使用它从数据中生成 (x,y) 坐标，然后使用路径绘制线条。上面的代码是直接使用线对象。
我明白这一点。我不明白为什么 d3.svg.line 的文档提到 x1、y1、x2 和 y2 - 当您使用 d3.svg.line 时，它们如何适应图片？如果您使用 append('line') 添加一个普通的旧行，我理解它们是如何适应的，但我不明白为什么在 d3.svg.line 的文档中提到它们。
抱歉，我不确定我是否正在查看不同的部分，但问题中的链接指向 svg 元素部分，并且其中的行具有指向 svg 行元素的超链接。我认为这不是 d3 特有的，而是一般的 SVG 元素。而 (link) 中的 d3.svg.line 是 d3 的辅助函数，它有助于生成点并使用路径元素绘制一条线。
啊，没错。所以 d3 doco 包含一个关于通用 SVG 形状的部分，而不是特定于 d3，然后在下面有一个定义 d3 路径生成器的部分 - 并且 d3.svg.line（d3 中的路径生成器）与 svg 并不真正相关。以任何方式（纯线形状，SVG 规范的一部分，不特定于 d3）。谢谢。

【解决方案2】：

希望这会有所帮助。检查行生成器函数和我添加路径的最后部分

// The data for our line
var lineData = [{
    x: 50,
    y: 50
}, {
    x: 50,
    y: 100
}, {
    x: 100,
    y: 150
}, {
    x: 150,
    y: 175
}, {
    x: 225,
    y: 175
}];

// Set the size of our graph
var w = 500;
var h = 500;
var padding = 10;


// Line generator function
var line = d3.svg.line()
    .x(function (d) {
    return d.x;
})
    .y(function (d) {
    return d.y;
})


// SVG container
var svg = d3.select('#line')
    .append('svg')
    .attr({
    width: w,
    height: h
});

// Add the path
var path = svg.append('path')
			 .attr("d", line(lineData))
			 .attr("stroke", "blue")
			 .attr("stroke-width", 2)
			 .attr("fill", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="line"></div>

【讨论】：