Javascript 如何使用d3将线图添加到散点图？

我目前有一个工作散点图，我用这个

var data = (an array of arrays with two integers in each array)

var margin = {top: 20, right: 15, bottom: 60, left: 60}
    , width = 300 - margin.left - margin.right
    , height = 250 - margin.top - margin.bottom;

var x = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d[0]; })])
            .range([ 0, width ]);

var y = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d[1]; })])
            .range([ height, 0 ]);

var chart = d3.select('.scatterGraph')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')


var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')   

// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(5);

main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');

main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);

var g = main.append("svg:g"); 

g.selectAll("scatter-dots")
    .data(data)
    .enter().append("svg:circle")
        .attr("cx", function (d,i) { return x(d[0]); } )
        .attr("cy", function (d) { return y(d[1]); } )
        .attr("r", 2);

---

我想知道如何在这个图中添加一个折线图（或者另一个散点图）。我是d3的新手，所以我现在不知道怎么做。例如，我只想添加一条由函数y=2t描述的直线，其中t是散点图的x轴。谢谢

如果它像函数

y=2t

所描述的一条线一样简单，那么在本例中

main

中，假设

宽度至少大于
高度的两倍，您可以将
线
元素添加到图表中

main.append("line").attr("x1", 0).attr("x2", height/2)
                   .attr("y1", height).attr("y2", 0);

但是，如果有一条线通过多个点连接，则需要向
svg
添加
path
元素，并使用
d3.svg.line（）
函数生成其
d
属性。所以像这样的

var lineFunction = d3.svg.line().x(function (d) { x(d[0])}; )
                                .y(function (d) { y(d[1])}; );
var gLine = main.append("g");
gLine.append("path").attr("d", lineFunction(data));

对于另一个散点图，可以重复使用

var g = main.append("svg:g"); 

g.selectAll("scatter-dots")
.data(data2)
.enter().append("svg:circle")
    .attr("cx", function (d,i) { return x(d[0]); } )
    .attr("cy", function (d) { return y(d[1]); } )
    .attr("r", 2);

但是，如果需要，可以使用不同的数据集和不同的访问器函数或比例