散点图点在D3.j中放大时保持值

Question

这是我第一次使用d3.js，所以请忍受我。我将其内部在vue.js文件内部实现为纯JavaScript。 我试图用缩放功能制作散点图。到目前为止，我的所有内容都快起来了，但是当我变焦时，我会注意到X轴无法正常缩放，但是Y轴正常工作。例如，当查看原始图时，x轴上可能在625左右，但是在同一点进行缩放之后，y轴不到600。 。我假设我的缩放功能中X轴的缩放尺寸有问题，但我无法弄清楚。请看一下，让我知道您是否可以看到我出错的地方。

编辑：我应该提到，这是使用D3.JS版本7.4.4，这

<template>
    <div id="reg_plot"></div>
</template>


<script>
import * as d3 from 'd3';
export default {
    name: 'regCamGraph',
    components: {
        d3
    },
    methods: {
        createSvg() {
            // dimensions
            var margin = {top: 20, right: 20, bottom: 30, left: 40},
                svg_dx = 1400, 
                svg_dy =1000,
                chart_dx = svg_dx - margin.right - margin.left,
                chart_dy = svg_dy - margin.top - margin.bottom;

            // data
            var y = d3.randomNormal(400, 100);
            var x_jitter = d3.randomUniform(-100, 1400);

            var d = d3.range(1000)
                        .map(function() { 
                            return [x_jitter(), y()]; 
                        });

            // fill
            var colorScale = d3.scaleLinear()
                                .domain(d3.extent(d, function(d) { return d[1]; }))
                                .range([0, 1]);


            // y position
            var yScale = d3.scaleLinear()
                            .domain(d3.extent(d, function(d) { return d[1]; }))
                            .range([chart_dy, margin.top]);
            
            // x position
            var xScale = d3.scaleLinear()
                            .domain(d3.extent(d, function(d) { return d[0]; }))
                            .range([margin.right, chart_dx]);
            console.log("chart_dy: " + chart_dy);
            console.log("margin.top: " + margin.top);
            console.log("chart_dx: " + chart_dx);
            console.log("margin.right: " + margin.right);
            // y-axis
            var yAxis = d3.axisLeft(yScale);

            // x-axis
            var xAxis = d3.axisBottom(xScale);

            // zoom
            var svg = d3.select("#reg_plot")
                        .append("svg")
                        .attr("width", svg_dx)
                        .attr("height", svg_dy);
            svg.call(d3.zoom().on("zoom", zoom));      // ref [1]

            // plot data
            var circles = svg.append("g")
                            .attr("id", "circles")
                            .attr("transform", "translate(200, 0)")
                            .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) 
                            });

            // add y-axis
            var y_axis = svg.append("g")
                            .attr("id", "y_axis")
                            .attr("transform", "translate(75,0)")
                            .call(yAxis).style("font-size", "20px")
                        
            // add x-axis
            var x_axis = svg.append("g")
                            .attr("id", "x_axis")
                            .attr("transform", `translate(${margin.left}, ${svg_dy - margin.bottom})`)
                            .call(xAxis).style("font-size", "20px")

            function zoom(e) {

                // re-scale y axis during zoom
                y_axis.transition()
                        .duration(50)
                        .call(yAxis.scale(e.transform.rescaleY(yScale)));

                // re-scale x axis during zoom
                x_axis.transition()
                        .duration(50)
                        .call(xAxis.scale(e.transform.rescaleX(xScale)));

                // re-draw circles using new y-axis scale
                var new_xScale = e.transform.rescaleX(xScale);
                var new_yScale = e.transform.rescaleY(yScale);

                console.log(d);

                x_axis.call(xAxis.scale(new_xScale));
                y_axis.call(yAxis.scale(new_yScale));
                circles.data(d)
                    .attr('cx', function(d) {return new_xScale(d[0])})
                    .attr('cy', function(d) {return new_yScale(d[1])});
            }

        }
    },
    mounted() {
        this.createSvg();
    }
    
}
</script>

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

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

Answer 1

我最终解决了这个问题。我已经更新了原始帖子，以显示对我有用的东西。

基本上，在添加剪辑区域后，事情开始正常工作。

// clip path (this is the new clip region that I added. It prevents dots from being drawn outside of the axes.
            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 clip region to svg 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) 
                            });