1

我正在尝试使用 d3 的平移/缩放功能在屏幕上绘制框，以便当您单击一个框时会出现一个新框并将其余框向右移动，以便新框位于中心的画布。平移将允许我滚动浏览我绘制的所有框。

这是我的 jsfiddle：http: //jsfiddle.net/uUTBE/1/

这是我初始化缩放/平移的代码： svg.call(d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    d3.select(".canvas").attr("transform",
        "translate(" + d3.event.translate + ")" 
        + " scale(" + d3.event.scale + ")");
}

这是我绘制盒子的代码：

function drawBox(x, y) {
    var boxGroup = canvas.append("g");
    boxGroup.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("height", 100)
        .attr("width", 100)
        .attr("fill", function () {
            var i = Math.floor(Math.random() * 4);
            if (i === 1) return "red";
            else if (i === 2) return "blue";
           else if (i === 3) return "yellow";
           else return "green";
        })
        .on("click", function () {
            counter++;
            d3.select(".canvas")
              .transition()
              .duration(1000)
              .attr('transform', "translate(300,0)");
         drawBox(x - counter * 120, y);
        });
}

我对这个小提琴有很多问题，但我主要担心的两个问题是：

1）如何做到这一点，以便当我第二次单击新框时，框会相应移动（即，当我最初单击框时，旧框向右移动并出现一个新框，但是当我单击时新盒子，旧盒子不会向右移动）。

2）为什么当我点击新框时，新框之间的间距很大？（仅在尝试将 3 个框放在屏幕上后才会发生）。

感谢任何提示表示赞赏！

4

1 回答 1

2

我认为这里有些混乱transform。transform对于单个元素，该属性是静态的，而不是累积的 - 因此多次设置.attr('transform', "translate(300,0)")在第一次之后将无效。看起来您对新框的放置逻辑也已关闭。

如果您退后一步，此处所需的定位逻辑非常简单（假设我了解您要做什么）：

  1. 每次添加一个新框时，所有框所在的框架都会向右移动 120px，因此需要x一个120 * counter.

  2. 新框需要从新框架位置偏移，因此它们需要x设置-120 * counter.

  3. 缩放需要考虑当前画布偏移量。

(1) 以上可以在您的点击处理程序中完成：

canvas
  .transition()
  .duration(1000)
  .attr('transform', "translate(" + (offset * counter) + ",0)");

(2) 很容易应用于g您包装盒子的元素：

var boxGroup = canvas.append("g")
    .attr('transform', 'translate(' + (-offset * counter)  + ',0)');

(3) 可以添加到你的redraw处理程序：

function redraw() {
    var translation = d3.event.translate,
        newx = translation[0] + offset * counter,
        newy = translation[1];
    canvas.attr("transform",
        "translate(" + newx + "," + newy + ")" + " scale(" + d3.event.scale + ")");
}

在这里查看工作小提琴：http: //jsfiddle.net/nrabinowitz/p3m8A/

于 2013-06-30T05:54:58.127 回答