Question

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

现在我尝试根据this实现使绘图平移和缩放。一旦我开始平移，我的点就会突然改变他们的位置。在缩放时，它们也会沿错误的方向缓慢移动。我认为缩放转换有问题，但我没有看到错误..

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

缩放我的观点，可能相关..（缩放模拟）：

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

完整小提琴here。

提前致谢！

Answer 1

您应该在缩放功能中更新cx和cy值：

Serial/windows

点数在D3散点图

1 个答案: