多行转换 - 从D3.js中的x行到y行

Question

我尝试将多行图转换为从一组x行到y行数的集合。经过许多例子（从stackoverflow和更广泛的网络这里）我仍然难过。请帮助我确定一个简单的解决方案。

相关守则：

    //--line generators
    var line_main = d3.svg.line()
        .defined(function (d) {
        return d.value != isNaN(d.value);
    }) //--deals with NAN but results in a y range extending to 0
    .x(function (d) {
        return x_main(d.date);
    })
        .y(function (d) {
        return y_main(d.value);
    });

    var svg = d3.select('#discharge-graph').append('svg')
        .attr('class', 'graph')
        .attr('width', w + margin.left + margin.right)
        .attr('height', h + margin.top + margin.bottom);

    var main = svg.append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    update();

    function update() {
        //--reset plot elements
        d3.selectAll("path.line").remove(); //--trying to use transitions instead of this

        //--paths for main areas
        main.selectAll('path.line')
            .data(sets)
            .enter()
            .append('path')
            .attr('d', function (d) {
            return line_main(d.values);
            })
            .attr('class', 'line')
            .style('stroke', function (d) {
            return colour(d.name);
        });
    };

我尝试了很多变化，我在这一行中注释掉了这些：

        d3.selectAll("path.line").remove(); 

并添加下面注释掉的一行或多行代码：

    //--paths for main areas
    main.selectAll('path.line')
    //d3.transition(main).select('path.line')
    //.transition().duration(600)
        .data(sets)
        //.transition().duration(600)
        .enter()
        .append('path')
        .attr('d', function (d) {
        return line_main(d.values);
    })
        .attr('class', 'line')
        .style('stroke', function (d) {
        return colour(d.name);
    });

结果始终是空白画布。现在的完整代码是JSFiddle。任何见解将不胜感激。