D3.js - 线图：线路径在变焦时越过x和y轴

Question

我有一个带有两条线性路径的折线图。一切都很好，只有当我在图表上选择区域时，线条会越过x轴和y轴：

请帮我找到问题。以下是我的代码：

var data = JSON.parse("[{\"time\": 1496511413,\"correlation\": 0.1,\"offset\": 8104}, {\"time\": 1496511414,\"correlation\": 0.2,\"offset\": 8105},{\"time\": 1496511415,\"correlation\": 0.4,\"offset\": 8106},{\"time\": 1496511416,\"correlation\": 0.5,\"offset\": 8107},{\"time\": 1496511417,\"correlation\": 0.7,\"offset\": 8120},{\"time\": 1496511418,\"correlation\": 0.8,\"offset\": 8120},{\"time\": 1496511419,\"correlation\": 0.3,\"offset\": 8108},{\"time\": 1496511420,\"correlation\": 0.6,\"offset\": 8109},{\"time\": 1496511421,\"correlation\": 0.9,\"offset\": 8110}]");
console.log(data);

var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = 700 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Scale axis
var timeScale = d3.scaleTime().range([0, width]);
var corrScale = d3.scaleLinear().range([height, 0]);
var offsetScale = d3.scaleLinear().range([height, 0]);


// Define Axes 
var timeAxis = d3.axisBottom(timeScale).ticks(5);
var corrAxis = d3.axisLeft(corrScale).ticks(5);
var offsetAxis = d3.axisRight(offsetScale).ticks(5);

// Define Lines 
var corrLine = d3.line()
                .x(function(d) { return timeScale(d.time); })
                .y(function(d) { return corrScale(d.correlation); });

var offsetLine = d3.line()
                .x(function(d) { return timeScale(d.time); })
                .y(function(d) { return offsetScale(d.offset); });


// plot graph
function plot_graph() {
    data.forEach(function(d) {
        d.time = new Date(d.time * 1000);
        d.correlation = +d.correlation;
        d.offset = +d.offset / 1000;
    });

    console.log(data);

    // Define brush
    var brush = d3.brush()
                .extent([[0, 0], [width, height]])
                .on('end', brushEnded),
        idleTimeout,
        idleDelay = 350;

    //Add domain for scale x-y axis
    timeScale.domain(d3.extent(data, function(d) { return d.time; }));
    corrScale.domain(d3.extent(data, function(d) { return d.correlation; }));
    offsetScale.domain(d3.extent(data, function(d) { return d.offset; }));

    // create svg element 
    var svg = d3.select('body')
                .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 + ')');

    svg.append('g')
        .attr('class', 'time axis')
        .attr("transform", "translate(0," + height + ")")
        .call(timeAxis);

    svg.append('g')
        .attr('class', 'corr axis')
        .style('fill', 'steelblue')
        .call(corrAxis);

    svg.append('g')
        .attr('class', 'offset axis')
        .attr('transform', 'translate(' + width + ', 0)')
        .style('fill', 'red')
        .call(offsetAxis);

    var focus = svg.append('g')
                    .attr("clip-path", "url(#clip)");

    focus.append('svg:path')
            .datum(data)
            .attr('class', 'corr line')
            .attr('d', corrLine);

    focus.append('svg:path')
            .datum(data)
            .attr('class', 'offset line')
            .style('stroke', 'red')
            .attr('d', offsetLine);

    focus.append('g')
        .attr('class', 'brush')
        .call(brush);


    function idled() {
        idleTimeout = null;
    }

    function brushEnded() {
        var s = d3.brushSelection(d3.select('.brush').node());

        if (!s) {
            if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);

            timeScale.domain(d3.extent(data, function(d) { return d.time; }));
            corrScale.domain(d3.extent(data, function(d) { return d.correlation; }));
            offsetScale.domain(d3.extent(data, function(d) { return d.offset; }));
        } else {
            console.log(s);
            console.log([s[0][0], s[1][0]].map(timeScale.invert, timeScale));
            console.log([s[1][1], s[0][1]].map(offsetScale.invert, offsetScale));
            console.log([s[1][1], s[0][1]].map(corrScale.invert, corrScale));

            timeScale.domain([s[0][0], s[1][0]].map(timeScale.invert, timeScale));
            corrScale.domain([s[1][1], s[0][1]].map(corrScale.invert, corrScale));
            offsetScale.domain([s[1][1], s[0][1]].map(offsetScale.invert, offsetScale));
            svg.select(".brush").call(brush.move, null);
        }

        zoom();
    }

    function zoom() {
        var t = svg.transition()
                    .duration(750);

        svg.select('.time.axis').transition(t).call(timeAxis);
        svg.select('.corr.axis').transition(t).call(corrAxis);
        svg.select('.offset.axis').transition(t).call(offsetAxis);

        console.log(timeScale(0));
        console.log(corrScale(0));

        console.log(corrLine(data));

        svg.select('path.corr.line')
            .transition(t)
            .attr('d', corrLine);

        svg.select('path.offset.line')
            .transition(t)
            .attr('d', offsetLine);

    }

}