Question

我必须在这里遗漏一些非常简单的东西。我想用d3.svg.line在两点之间划一条线。文档如下：

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

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

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

Answer 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")

Answer 2

希望这会有所帮助。检查线生成器功能和我添加路径的最后一部分

＆＃13;

// 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");

＆＃13;

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

＆＃13;

d3 - 理解d3.svg.line的文档

2 个答案: