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
