Javascript 在d3.js中，如何在不同的点击事件上添加和删除多行？

这是我的数据：

var lineData =[ 
     [  {
          x: "2014-12-29",
          y: 113.9
        }, {
          x: "2015-01-09",
          y: 112.1
        }, {
          x: "2015-01-21",
          y: 110.3
        }, {
          x: "2015-02-05",
          y: 112.8
        }, {
          x: "2015-02-19",
          y: 108.5
        }, {
          x: "2015-03-06",
          y: 111.3
        }
    ],
    [   {
          x: "2014-12-29",
          y: 118.2
        }, {
          x: "2015-01-13",
          y: 116
        }, {
          x: "2015-02-26",
          y: 114
        }
    ],
   [    {
          x: "2014-12-29",
          y: 123.6
        }, {
          x: "2015-01-10",
          y: 123.3
        }, {
          x: "2015-01-29",
          y: 122.1
        }, {
          x: "2015-02-12",
          y: 121.9
        }, {
          x: "2015-02-25",
          y: 122.3
        }, {
          x: "2015-03-06",
          y: 119.7
        }
    ]

])

我希望每个子数组都是折线图上不同线条的数据

这里是一个单击事件，我想在其中向图表中添加一行：

function twokClick(){
$('#2k').click( function(){
        if($(this).css("background-color") == "rgb(178, 178, 178)"){
            $(this).css("background-color", "#8E8E8E");
            addLine(0);

        }
        else {
            $(this).css("background-color", "rgb(178, 178, 178)");
            removeLine(0);
        }
    });
}

这里是我第一次制作svg和轴的地方：

    function graph() {
    $('#progress').click( function(){ 
        var svg = d3.select("svg");
        var WIDTH = 1100;
        var HEIGHT = 350;
        var MARGINS = {
          top: 40,
          right: 20,
          bottom: 40,
          left: 80
        };
        xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
            .domain([new Date(date.min), new Date(date.max)]);
        yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
            .domain([60, 140]);

        var xAxis = d3.svg.axis()
          .scale(xRange)
          .tickSize(5)
          .ticks(18)
          .tickFormat(d3.time.format('%e/%m'))
          .tickSubdivide(true);
        var yAxis = d3.svg.axis()
          .scale(yRange)
          .tickSize(5)
          .orient('left')
          .tickSubdivide(true);

        svg.append("g")
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) +     ')')
          .call(xAxis);

        svg.append("g")
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
          .call(yAxis);
        svg.append("g")
          .attr("class", "y axis")
          .append("text")
          .attr("class", "axis-label")
          .attr("transform", "rotate(-90)")
          .attr("y", 40)
          .attr("x", -HEIGHT/2-MARGINS.top-50)
          .text('Split (Seconds per 500m)');

    });
}

这是我无法使用的部分，我的addLine（）函数：

function addLine(i) {
    data = lineData[i];
    var line = d3.svg.line()
    .x(function(d) { return xRange(new Date(d.x)); })
    .y(function(d) { return yRange(d.y); });

    svg.select('.line')
    .data(data)
    .enter()
    .append("path")
    .data(data)
    .attr("id",  i + "line")
    .attr("class", "line")
    .attr('stroke', "#FFFFFF")
    .attr("d", line(data));
}

---

此函数不起作用，我的行也不显示。请帮忙。谢谢

如果您发布完整代码的链接，就可以回答您的问题。 这是我最好的猜测：

SVG“line”元素是单行，没有内部。 这意味着这条线不占用空间，所以我们实际上什么也看不到

要解决此问题，请确保给出以下行： 属性（“笔划宽度”，数字），其中数字是以单位表示的线条宽度

---

因此，在最好的情况下，您只需添加一行代码：请参见//您的

addline

函数正在引用

svg

的一个局部范围变量，该变量在

graph

函数中定义。也许可以使

svg

变量可用于

addLine

函数，或者您可以尝试使用

d3。在尝试进一步排除故障之前，选择all

方法获取该变量。

function addLine(i) {
    data = lineData[i];
    var line = d3.svg.line()
    .x(function(d) { return xRange(new Date(d.x)); })
    .y(function(d) { return yRange(d.y); });

    svg.select('.line')
    .data(data)
    .enter()
    .append("path")
    .data(data)
    .attr("id",  i + "line")
    .attr("class", "line")
    .attr('stroke', "#FFFFFF")
    .attr('stroke-width', 2) // <-- A add this line
    .attr("d", line(data));
}