添加剪切路径在D3图形中隐藏了我的y轴

Question

我正在尝试使用Zooming工具创建D3散点图。缩放时，我想隐藏所有超出两个轴的数据点。为此，我正在使用剪切路径。但是，使用它会隐藏y轴上的所有刻度和值。只是该行仍然可见。

这是我在角度4中的代码：

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import * as d3 from 'd3';

@Component({
    selector: 'app-scatterplot',
    templateUrl: './scatterplot.component.html',
    styleUrls: ['./scatterplot.component.css']
})
export class ScatterplotComponent implements OnInit {
    @ViewChild('chart1') private chartContainer: ElementRef;
    dataValue = [{ x: "67", y: "188", },
    { x: "200", y: "163" },
    { x: "254", y: "241" },
    { x: "175", y: "241" },

    ];

    ngOnInit() {
        this.graph();
    }

    graph() {

        const element = this.chartContainer.nativeElement;
        var svgWidth = 400;
        var svgHeight = 400;

        var margin = { top: 30, right: 40, bottom: 50, left: 60 };

        var width = svgWidth - margin.left - margin.right;
        var height = svgHeight - margin.top - margin.bottom;

        var originalCircle = {
            "cx": -150,
            "cy": -15,
            "r": 20
        };


        var svgViewport = d3.select(element)
            .append('svg')
            .attr('width', svgWidth)
            .attr('height', svgHeight)

       // clipping path    
       svgViewport.append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", svgWidth)
            .attr("height", svgHeight)
            .attr("fill", "red")
            .attr("fill-opacity", 0.1);

        // create scale objects
        var x = d3.scaleLinear()
            .domain([1, 500])
            .range([0, width]);

        var y = d3.scaleLinear()
            .domain([1, 500])
            .range([height, 0]);


        // create axis objects
        var xAxis = d3.axisBottom(x);
        var yAxis = d3.axisLeft(y);


        // Zoom Function
        var zoom = d3.zoom()
            .on("zoom", zoomFunction);



        // Inner Drawing Space
        var innerSpace = svgViewport.append("g")
            .attr("class", "inner_space")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("clip-path", "url(#clip)")
            .call(zoom);




        // append some dummy data
        var data = innerSpace.selectAll("circle")
            .data(this.dataValue)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("cx", function (d) {
                return x(d.x)
                    ;
            })
            .attr("cy", function (d) {
                return y(d.y);
            })
            .attr("r", 2);

        // Draw Axis
        var gX = innerSpace.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis);

        var gY = innerSpace.append("g")
            .attr("class", "axis axis--y")
            .call(yAxis);



        // append zoom area
        var view = innerSpace.append("rect")
            .attr("class", "zoom")
            .attr("width", width)
            .attr("height", height - 10)
            .attr("fill", "transparent")
            .attr("fill-opacity", 0.1)
            .call(zoom)

        function zoomFunction() {
            // create new scale ojects based on event
            var new_xScale = d3.event.transform.rescaleX(x)
            var new_yScale = d3.event.transform.rescaleY(y)
            console.log(d3.event.transform)

            // update axes
            gX.call(xAxis.scale(new_xScale));
            gY.call(yAxis.scale(new_yScale));

            // update circle
            data.attr("transform", d3.event.transform)
        };

    }
}

从上面的代码中，如果我删除了代码

.attr("clip-path", "url(#clip)")

来自代码块：

  // Inner Drawing Space  
    var innerSpace = svgViewport.append("g")
                .attr("class", "inner_space")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .attr("clip-path", "url(#clip)")
                .call(zoom);

该图变得完美。但是在缩放时，即使数据值超出了两条轴线，也会保持显示。我如何隐藏它。