javascript - 如何使用 d3 将折线图添加到散点图？

Question

我目前有一个可用的散点图，是我使用它制作的

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 轴。谢谢!

Answer 1

如果它像函数 y=2t 描述的线条一样简单，在这种情况下，您可以将 line 元素附加到您的图表 main 像这样，假设您的 width 至少大于 height

的两倍

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

但如果您有一条线通过多个点连接，则需要将 path 元素添加到您的 svg 中，并使用 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);

但如果需要，使用不同的数据集和不同的访问函数或尺度。