D3.js line chart overflows margins

问题

I have d3.js line chart which is included as directive to angular.js application. Lines and xAxis added dynamically and on zoom lines overflows margins :( I have to create Ox axes on the top of the figure for every loaded line, with Ox and Oy separate zoom possibility. Oy zoom works fine accept this margin issue

Chart

                    // 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]));
                        }
                    });

                }

And here its result

来源：https://stackoverflow.com/questions/27860689/d3-js-line-chart-overflows-margins