在D3散点图中，点在放大时改变位置

Points change position on zoom in D3 scatterplot

本文关键字：改变 位置 放大 D3 散点图      更新时间：2023-09-26

我按照这个例子制作了一些数据点的散点图-效果很好。

现在我试图使情节平移和缩放基于这个实现。不知怎么的，当我开始平移时，我的点突然改变了位置。它们在缩放时也会向错误的方向缓慢移动。我假设我的缩放变换有问题，但我没有看到错误…

function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.selectAll(".dot")
        .attr("transform", transform);
}
function transform(d) {
    return "translate(" + xScale(d.lng) + "," + yScale(d.alt) + ")";
}
var zoomBeh = d3.behavior.zoom()
    .x(xScale)
    .y(yScale)
    .on("zoom", zoom);
var svg = d3.select('svg')
    .attr("width", w)
    .attr("height", h)
    .attr("class", "chart")
svg.call(zoomBeh);

缩放我的点，可能相关…(y缩放模拟):

var xScale = d3.scale.linear()
    .domain([d3.min(data, function (d) {
        return d.lng;
    }), d3.max(data, function (d) {
        return d.lng;
    })]).range([padding, w - padding]);

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", function (d) {
        return xScale(d.lng);
    })
    .attr("cy", function (d) {
        return yScale(d.alt);
    });

和轴:

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(6);
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

这里放满了小提琴

提前感谢!

您应该更新缩放函数中的cx和cy值:

function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.selectAll(".dot")
    .attr("cx", function (d) {
    return xScale(d.lng);
    })
    .attr("cy", function (d) {
    return yScale(d.alt);
});
}
相关文章：