使用散点图进行平移无法正常进行

Question

我正在尝试在此散点图上使用平移功能，但它根本没有平滑.Zoom工作正常。 我不知道D3的提示和技巧所以请帮助我。

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 15]).on("zoom", zoom))
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("dataset.csv", function (data) {
    // Coerce the strings to numbers.
    data.forEach(function (d) {
        d.word = d.word
        d.xcord = +d.xcord;
        d.ycord = +d.ycord;
        //console.log(d.word);
    });

    // Compute the scales’ domains.
    x.domain(d3.extent(data, function (d) { return d.xcord; })).nice();
    y.domain(d3.extent(data, function (d) { return d.ycord; })).nice();

    // Add the points!
    svg.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       //.attr("fill","grey")
       .attr("cx", function (d) {
           return x(d.xcord);
       })
       .attr("cy", function (d) {
           return y(d.ycord);
       })

       .attr("r", 1);

});

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

这里的问题是您没有使用组元素来创建图层来进行转换。正如您在代码中看到的那样，首先必须将转换对象绑定到svg 层，然后再将svg 层另一个层< / em>（在此实例中为一个元素）可以使用。

使用你的D.O.M.检查器查看已附加的svg图层的子项。

在平移之前，您会看到g对象的转换值是默认属性值（translate（0,0）。

平移后，翻译属性会有所不同。

基本上发生的事情是g层被用作附加项目的主层。 svg层依次充当掩码/窗口的一部分来查看转换的g层。这种方法也适用于svg元素以换取g元素。

以下是相应代码的jsfiddle：http://jsfiddle.net/blakedietz/seU2y/

请注意，我必须进行一些修改才能使您的代码正常工作。如果您希望有人更快地回答您的问题，我建议您创建一些代码的工作示例以供将来参考。使用虚假数据的玩具示例通常是传达手头问题的最佳方式，而不会让读者做太多的猜测工作来弄清楚您尝试沟通的是什么。

// ********* START MY CODE

var width = 500;
var height = 500;
var margin = {top:0, right:0,bottom:0,left:0};

var data = d3.range(1,20).map(function(datum)
                          {

                              var coordinates = {};
                              coordinates.xcord   = datum;
                              coordinates.ycord   = datum;
                              return coordinates;
                          });

var xDomain = d3.extent(data.map(function(datum){ return datum.xcord}));
var yDomain = d3.extent(data.map(function(datum){ return datum.ycord}));

var x = d3.scale.linear().domain(xDomain).range([margin.left, width - margin.right]);
var y = d3.scale.linear().domain(yDomain).range([height - margin.bottom, margin.top]);

function zoom()
{
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale +                 ")");
}
// ********* END MY CODE 


// ********* START YOUR CODE
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
        .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 15]).on("zoom", zoom))
// MY MODIFICATION Adds g layer to append to.
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Compute the scales’ domains.
x.domain(d3.extent(data, function (d) { return d.xcord; })).nice();
y.domain(d3.extent(data, function (d) { return d.ycord; })).nice();

// Add the points!
svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   //.attr("fill","grey")
   .attr("cx", function (d) {
       return x(d.xcord);
   })
   .attr("cy", function (d) {
       return y(d.ycord);
   })

   .attr("r", 1);