点在D3散点图的缩放上更改位置

Question

在此示例之后，我做了一些数据点的散点图-正常工作。

现在，我尝试根据此实现使绘图平移和缩放。 一旦开始平移，我的点就以某种方式突然改变了它们的位置。 缩放时，它们也会朝错误的方向缓慢移动。 我认为我的缩放变换出了点问题，但是我没有看到错误。

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

这里摆满小提琴。

提前致谢！

Answer 1

您应该在缩放功能中更新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);
});

}