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

我已经更新了您的代码笔here。我稍微改变了直线和圆的附加方式，并将剪辑路径绑定到容纳直线/圆的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()

通过这种方式剪切整个分组。

D3折线图-折线不正确缩放（ClipPath，缩放）

1 个答案: