这是我第一次使用 d3.js，所以请耐心等待。我在 vue.js 文件中将其作为纯 JavaScript 实现。 我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，我注意到 x 轴未正确缩放，但 y 轴工作正常。例如，在查看原始图时，某个点可能位于 x 轴上的 625 左右，但放大后同一点将小于 600。y 轴上不会发生这种情况 - 这些点会正确缩放。我假设缩放函数中 x 轴的缩放有问题，但我就是无法弄清楚。请看一下，如果您能看出我哪里出错了，请告诉我。

编辑：我应该提到这是使用 d3.js 版本 7.4.4

有趣的是，在我设置剪辑区域以防止显示轴之外的点后，问题似乎自行解决了。这就是我创建剪辑路径的方式：

// clip path
            var clip = svg.append("defs").append("svg:clipPath")
            .attr("id", "clip")
            .append("svg:rect")
            .attr("id", "clip-rect")
            .attr("x", "0")
            .attr("y", "0")
            .attr('width', chart_dx)
            .attr('height', chart_dy);

然后，我在绘制数据时将该属性添加到 svg，如下所示：

svg.append("g").attr("clip-path", "url(#clip)")

使用绘图数据部分更新了剪辑路径：

// clip path
            var clip = svg.append("defs").append("svg:clipPath")
            .attr("id", "clip")
            .append("svg:rect")
            .attr("id", "clip-rect")
            .attr("x", "0")
            .attr("y", "0")
            .attr('width', chart_dx)
            .attr('height', chart_dy);

            // plot data
            var circles = svg.append("g")
                            .attr("id", "circles")
                            .attr("transform", "translate(75, 0)")
                            .attr("clip-path", "url(#clip)") //added here
                            .selectAll("circle")
                            .data(d)
                            .enter()
                            .append("circle")
                            .attr("r", 4)
                            .attr("cx", function(d) { return xScale(d[0]); })
                            .attr("cy", function(d) { return yScale(d[1]); })
                            .style("fill", function(d) { 
                                var norm_color = colorScale(d[1]);
                                return d3.interpolateInferno(norm_color) 
                            });