如何防止图形元素到达 D3 中图形的轴并正确缩放？

Question

我目前对即将为网站创建的图表进行了快速测试，并且我已经完成了最基本的功能。我有一个图表、一个 4 个元素、一个 x 和一个 y 轴以及一个缩放功能。

我的问题在于，当我放大图表时，元素能够到达轴并重叠。我在下面粘贴了我的源代码

    //Setting generic width and height values for our SVG.
    var margin = {top: 60, right: 0, bottom: 60, left: 40},
        width = 1024 - 70 - margin.left - margin.right,
        height = 668 - margin.top - margin.bottom;

     //Other variable declarations.


    //Creating scales used to scale everything to the size of the SVG.
    var xScale = d3.scale.linear()
        .domain([0, 1024])
        .range([0, width]);

    var yScale = d3.scale.linear()
        .domain([1, 768])
        .range([height, 0]);

    //Creates an xAxis variable that can be used in our SVG.
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

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


    // The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc..
    var SVG = d3.select("#mainSVG")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(zoom);


    //Create background. The mouse must be over an object on the graph for the zoom to work. The rectangle will cover the entire graph.
    var rect = SVG.append("rect")
        .attr("width", width)
        .attr("height", height);

    //Showing the axis that we created earlier in the script for both X and Y.
    var xAxisGroup = SVG.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    var yAxisGroup = SVG.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    //This selects 4 circles (non-existent, there requires data-binding) and appends them all below enter.
    //The amount of numbers in data is the amount of circles to be appended in the enter() section. 
    var circle = SVG
        .selectAll("circle")
        .data([40,100,400,1900])
        .enter()
            .append("circle")
            .attr("cx",function(d){return xScale(d)})
            .attr("cy",function(d){return yScale(d)})
            .attr("r",20);

    //Resets zoom when click on circle object. Zoom work now, should be changed to a button instead of click on circle though.
    SVG.selectAll("circle").on("click", function() {
        zoom.scale(1);
        zoom.translate([0,0]);
        zoomTargets();
    });

    function zoomTargets() {
       SVG.select(".x.axis").call(xAxis);
       SVG.select(".y.axis").call(yAxis);

       SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
    }

    function resetZoom() {
        zoom.scale(1);
        zoom.translate([0,0]);
        zoomTargets();
    }

我在创建一个圆圈之前尝试使用“append("g2") 我可以使 g2 小于整个 svg，但这似乎不起作用。据我所知，你可以追加现有元素中的一个新元素。我猜我错了，因为它对我不起作用。

提前感谢您的帮助。

Answer 1

在最极端的数据点和轴之间留一个小间隙。特别是，您可能希望您的域范围考虑边距：

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

var yScale = d3.scale.linear()
    .domain([1, 768])
    .range([height, margin.bottom]);