D3.js折线图溢出边距

Question

我有d3.js折线图，它作为angular.js应用程序的指令包含在内。线条和xAxis动态添加并在缩放线上溢出边距:(我必须在每个加载线的图形顶部创建Ox轴，使用Ox和Oy单独缩放的可能性.Oy缩放工作正常接受此边距问题

图表

                    // Define zoom beavior
                var zoomLas = d3.behavior.zoom()
                    .y(y)
                    .scaleExtent([0, 20])
                    .on("zoom", zoomedLas);



                var las = d3.select(element[0])
                    .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 + ")")
                    .call(zoomLas);


                // Add the X Axis
                las.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0, 0)")
                    .call(xAxis);


                // Add the Y Axis
                las.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);


                las.append("g")
                    .attr("class", "x grid")
                    .attr("transform", "translate(0," + height + ")")
                    .call(make_x_axis(10)
                        .tickSize(-height, 0, 0)
                        .tickFormat("")
                );

                las.append("g")
                    .attr("class", "y grid")
                    .call(make_y_axis(20)
                        .tickSize(-width, 0, 0)
                        .tickFormat("")
                );


                var xX={};
                //Add lines to plot
                var lineCounter = 0;
                for (var property in linesObj) {
                    if (linesObj.hasOwnProperty(property)) {

                        ++lineCounter;
                        var prop = property.toLowerCase();

                        xX['x' + prop] = d3.scale.linear().range([0, width]);
                        xX['x' + prop].domain([0, d3.max(linesObj[property], function (d) {
                            return Math.max(d.DATA);
                        })]);


                        // Define additional axes
                        xX['x' + prop +'Axis'] = d3.svg.axis().scale(xX['x' + prop])
                            .orient("top").ticks(5).tickSize(3).tickFormat(function (d) {
                                return d
                            });


                        // Add the X Axis
                        las.append("g")
                            .attr("class", "x axis " + "X" + prop + "LineClass")
                            .attr("stroke", colors[lineCounter])
                            .attr("stroke-width", "1px")
                            .attr("transform", "translate(0, " + (-20) * lineCounter + ")")
                            .call(xX['x' + prop +'Axis']);


                        xX['x' + prop +'Line'] = d3.svg.line()
                            .x(function (d) {
                                // return the X coordinate where we want to plot this datapoint
                                var data = parseFloat(d.DATA);
                                var crv = d.CURVE.toLowerCase();
                                return xX['x' + crv](data);
                            })
                            .y(function (d) {
                                // return the Y coordinate where we want to plot this datapoint
                                var depth = parseFloat(d.DEPTH);
                                return y(depth);
                            });


                        las.append("path")
                            .attr("class", "line " + prop + "LineClass")
                            .attr("stroke", colors[lineCounter])
                            .attr("stroke-width", "1.5px")
                            .attr("fill", "none")
                            .on('mouseover', function (d) {
                                d3.select(this).attr("stroke-width", "2.5px");
                                var thisClass = this.getAttribute('class');
                                var classForX = thisClass.replace('line ', '');
                                d3.selectAll(".x.axis.X" + classForX).attr("stroke-width", "2px")
                            })
                            .on('mouseout', function (d) {
                                d3.select(this).attr("stroke-width", "1.5px");
                                var thisClass = this.getAttribute('class');
                                var classForX = thisClass.replace('line ', '');
                                d3.selectAll(".x.axis.X" + classForX).attr("stroke-width", "1px")
                            })
                            .attr("d", xX['x' + prop +'Line'](linesObj[property]));
                         //   .call(dragLas);



                    }
                }

                function zoomedLas() {
                    las.select(".y.axis").call(yAxis);
                    las.select(".y.grid")
                        .call(make_y_axis(20)
                            .tickSize(-width, 0, 0)
                            .tickFormat(""));

                    newVal.forEach(function (entry) {
                        if (entry != "DEPTH") {
                            var curveClass = entry.toLowerCase();

                            las.selectAll('.line.' + curveClass + 'LineClass').attr('d', xX['x' + curveClass +'Line'](linesObj[entry]));
                        }
                    });

                }

这里的结果