d3.js组合图线条和散点

我是d3.js的新手，我正在尝试在散点图的顶部添加一条线。我有两个数据集要绘制

var data = [ {
        "x" : 30,
        "y" : 30,
        "r" : 20,
        "c" : "green",
        "s" : "s1"
    }, {
        "x" : 70,
        "y" : 70,
        "r" : 20,
        "c" : "purple",
        "s" : "s2"
    }, {
        "x" : 110,
        "y" : 100,
        "r" : 20,
        "c" : "red",
        "s" : "s3"
    } ];

    var data1 = [{
        "x":30,
        "y":30},
        {"x":70,
            "y":70}];

数据变量用作散点序列，在同一图表上，我想将第二个数据集绘制为一个直线序列

var margin = {
            top : 20,
            right : 20,
            bottom : 30,
            left : 40
        }, width = 960 - margin.left - margin.right, height = 500 - margin.top
                - margin.bottom;

    var x = d3.scale.linear().range([ 0, width ]);

    var y = d3.scale.linear().range([ height, 0 ]);

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("left");

    var svg = d3.select("#"+div).append("svg").attr("width",
            width + margin.left + margin.right).attr("height",
            height + margin.top + margin.bottom).append("g").attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")");

    var data = [ {
        "x" : 30,
        "y" : 30,
        "r" : 20,
        "c" : "green",
        "s" : "s1"
    }, {
        "x" : 70,
        "y" : 70,
        "r" : 20,
        "c" : "purple",
        "s" : "s2"
    }, {
        "x" : 110,
        "y" : 100,
        "r" : 20,
        "c" : "red",
        "s" : "s3"
    } ];

    var data1 = [{
        "x":30,
        "y":30},
        {"x":70,
            "y":70}];

    x.domain(d3.extent(data, function(d) {          
        return d.x;
    })).nice();
    y.domain(d3.extent(data, function(d) {
        return d.y;
    })).nice();

    svg.append("g").attr("class", "x axis").attr("transform",
            "translate(0," + height + ")").call(xAxis).append("text").attr(
            "class", "label").attr("x", width).attr("y", -6).style(
            "text-anchor", "end").text("Yield");

    svg.append("g").attr("class", "y axis").call(yAxis).append("text")
            .attr("class", "label").attr("transform", "rotate(-90)").attr(
                    "y", 6).attr("dy", ".71em").style("text-anchor", "end")
            .text("Skew")

    var line = d3.svg.line()
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });
    svg.selectAll(".line").data(data1).enter().append("path").attr("class","line").attr("d",line);

    svg.selectAll(".dot").data(data).enter().append("circle").attr("class",
            "dot").attr("r", 3.5).attr("cx", function(d) {
        return x(d.x);
    }).attr("cy", function(d) {
        return y(d.y);
    }).style("fill", function(d) {
        return color(d.c);
    });



    var legend = svg.selectAll(".legend").data(color.domain()).enter()
            .append("g").attr("class", "legend").attr("transform",
                    function(d, i) {
                        return "translate(0," + i * 20 + ")";
                    });

    legend.append("rect").attr("x", width - 18).attr("width", 18).attr(
            "height", 18).style("fill", color);

    legend.append("text").attr("x", width - 24).attr("y", 9).attr("dy",
            ".35em").style("text-anchor", "end").text(function(d) {
        return d;
    });

但我一点也看不出有什么界限

使用数据（[data1]）（或数据（data1）），并设置行的样式，使其显示：

svg.append("path")
        .data([data1])
    .attr("class","line")
    .attr("stroke", "steelblue")
    .attr("fill", "none")
    .attr("stroke-width", 1.5)
    .attr("d",line);

在以下情况之前：

svg.selectAll(".line").
        data(data1).enter()
    .append("path")
        .attr("class","line")
        .attr("d",line);

正在为要打印的每个点创建路径元素

<path class="line"></path>
<path class="line"></path>

而且电话线从来没有人打过。相反，我们需要一个路径对象，并将整个点数组绑定到它。对于该对象，我们使用.attr（“d”，line）添加点，最后得到以下结果：

<path class="line" stroke-width="1.5" d="M0,450L450,192.8571428571429"></path> 

---

请查看mbostock提供的这篇文章（及其链接），了解这篇文章的更多内容。

谢谢，现在我可以看到这篇文章了。唯一的问题是，如果我在data1 json数组中再添加一个数据点，它将以一个多边形结束，这条线将连接回数组中的第一个点。是的。这就成功了。虽然我认为它会删除填充并显示多边形。谢谢