d3js V4中的游泳圈图表

Question

我正在努力使这个swimlane chart与最新的d3.js版本一起使用。

到目前为止，我已设法将一些d3.js v2 API迁移到d3.js V4.5 API，但有一些问题我无法弄清楚。

我得到了“预期长度”，NaN“错误似乎来自.call（画笔）

plunker with changes I made

function display () {

    var rects, labels
      , minExtent = d3.timeDay(brush.extent()[0])
      , maxExtent = d3.timeDay(brush.extent()[1])
      , visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent});

    mini.select('.brush').call(brush.extent([minExtent, maxExtent]));       

    x1.domain([minExtent, maxExtent]);

    //x1Offset.range([0, x1(d3.time.day.ceil(now) - x1(d3.time.day.floor(now)))]);

    // shift the today line
    main.select('.main.todayLine')
        .attr('x1', x1(now) + 0.5)
        .attr('x2', x1(now) + 0.5);

    // update the axis
    main.select('.main.axis.date').call(x1DateAxis);
    main.select('.main.axis.month').call(x1MonthAxis)
        .selectAll('text')
            .attr('dx', 5)
            .attr('dy', 12);

    // upate the item rects
    rects = itemRects.selectAll('rect')
        .data(visItems, function (d) { return d.id; })
        .attr('x', function(d) { return x1(d.start); })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); });

    rects.enter().append('rect')
        .attr('x', function(d) { return x1(d.start); })
        .attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); })
        .attr('height', function(d) { return .8 * y1(1); })
        .attr('class', function(d) { return 'mainItem ' + d.class; });

    rects.exit().remove();

    // update the item labels
    labels = itemRects.selectAll('text')
        .data(visItems, function (d) { return d.id; })
        .attr('x', function(d) { return x1(Math.max(d.start, minExtent)) + 2; });

    labels.enter().append('text')
        .text(function (d) { return 'Item\n\n\n\n Id: ' + d.id; })
        .attr('x', function(d) { return x1(Math.max(d.start, minExtent)) + 2; })
        .attr('y', function(d) { return y1(d.lane) + .4 * y1(1) + 0.5; })
        .attr('text-anchor', 'start')
        .attr('class', 'itemLabel');

    labels.exit().remove();
}