I am utilizing D3 version 4 to process data and create a graph based on dates.
Although I have successfully adjusted everything to be compatible with zoom functionality, I am struggling to prevent the line from extending beyond the chart axes. I would prefer it to remain inside the chart and simply truncate when the user zooms in.
Despite implementing a clip path to cut off the lines/dots at the axis boundary, they still overflow when the user zooms in, missing the original section that was trimmed (e.g., only half of a dot visible, but larger and overflowing).
You can view the entire project here: https://codepen.io/lahesty/pen/NzMVjj
Highlighted below are some key elements:
// scale, set ranges
var x = d3.scaleLinear()
.range([0, width-100])
.domain(d3.extent(data, function(d) { return d.inspected_at; }));
var y = d3.scaleLinear()
.range( [height, 0])
.domain(d3.extent(data, function(d) { return d.temperature; }));
var zoom = d3.zoom()
.scaleExtent([1, 40])
.on("zoom", zoomed);
//// clip path
defs = svg
.append('g')
.attr('width', 100)
.attr('height', 0)
.append('defs')
defs.append('clipPath')
.attr('id', 'clipper')
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
//append line
svg.append('g')
.append("path")
.attr('clip-path', 'url(#clipper)')
.attr("class", "line")
.attr("d", line(data))
.attr("stroke", "blue")
function zoomed() {
svg.selectAll(".line")
.attr("transform", d3.event.transform);
svg.selectAll("circle")
.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)))
gY.call(yAxis.scale(d3.event.transform.rescaleY(y)))}