D3 折线图 - 折线图未正确缩放(剪辑路径、缩放)

Question

我正在使用 D3 版本 4 按日期解析数据和图形。

我已经缩放了所有内容以很好地使用缩放，但是我似乎无法防止线条溢出轴外。我希望它留在图表内，并在用户放大时切断部分。

使用剪辑路径，线/点在轴边界处被切断，但是当用户放大时，它们溢出过去，但仍然缺少被切断的原始部分(即只有半个点，只是更大和溢出(。

整个项目可在此处查看：https://codepen.io/lahesty/pen/NzMVjj

以下是一些重要/相关的部分：

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

Answer 1

我已经在这里更新了你的代码笔。我稍微改变了线条和圆圈的附加方式，并将剪辑路径绑定到包含线条/圆圈的g组。

svg.append('g')
.attr('clip-path', 'url(#clipper)') .selectAll('path.line').data([data])
.enter().append("path") 
.attr("class", "line")
.attr("d", line)
.attr("stroke", "blue");    
// draw the plot data
svg.append('g').attr('clip-path', 'url(#clipper)') .selectAll("circle.dot")                                 
.data(data)                                         
.enter()

这样，它就可以剪辑整个分组。