Graph 如何更新比例以考虑轴

我试图用自定义标签更新我的axis，因为我希望我的用户能够使用不同的数据集。我加载的当前标签名称数组中有17个元素

加载页面时，图表仅显示11个元素，如下所示：

如何更新我的xScale，以便能够一次更新所有元素

以下是我体重秤的代码：

    var xScale = d3.scale.linear()
        .domain([-25, genWidth])
        .range([0, width-margin.right]);

对于我的更新功能：

    function updateAxisX(arr) {

        var formatAxis = function(d) {
           return arr[d % arr.length];      
        }

        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(formatAxis);


        SVG.select(".x.axis")
            .call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
    }

    var zoom = d3.behavior.zoom()
        .x(xScale)
        .y(yScale)
        .scaleExtent([1, 10])
        .on("zoom", zoomTargets);

    function zoomTargets() {
        SVG.select(".x.axis").call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
        SVG.select(".y.axis").call(yAxis);
        SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
    }

我还有一个缩放功能，你也可以在这里拖动图形。正如我所提到的，X轴总共有17个元素，尽管在我的图上它们被重复了一遍又一遍。有什么方法可以防止缩放让用户将图形拖出“最大”帧？换言之，我希望只有在图形被放大的情况下才能拖动，直到您到达图形的“边缘”为止

以下是我的缩放功能的代码：

    function updateAxisX(arr) {

        var formatAxis = function(d) {
           return arr[d % arr.length];      
        }

        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(formatAxis);


        SVG.select(".x.axis")
            .call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
    }

    var zoom = d3.behavior.zoom()
        .x(xScale)
        .y(yScale)
        .scaleExtent([1, 10])
        .on("zoom", zoomTargets);

    function zoomTargets() {
        SVG.select(".x.axis").call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
        SVG.select(".y.axis").call(yAxis);
        SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
    }

也不要介意巨大的红色圆圈，它们只是为了测试一些东西而随机制作的。 我还应该提到，当我完成所有工作时，我的图表应该是散点图

还有一个简单的问题。因为我没有使用数字，而是在插入字符串的地方使用自定义标签。如何将my圆相应地插入x轴上的每个点

---

非常感谢您事先的帮助

你看到了吗？是的，我看到了。尽管我对如何使用我认为介于受约束的缩放和当前的缩放之间的东西感到困惑。当我使用示例中相同的受约束缩放时，我的轴也被放大。我希望轴缩放按现在的方式工作，区域的其余部分使用受约束的缩放。我想，如何防止轴被放大是我的问题。我不知道我是否理解。那么你想禁用缩放吗？是的，我想是的，我想有一个受约束的缩放，同时保持图形左侧和底部的两个轴，同时保持字体和线条的大小不变。当我使用约束缩放时，轴会随着图形元素的增加而增大。例如，如果我用受限的变焦放大图的中间，轴就不会在AVG的可视部分了。实际上，您不需要缩放整个画布。