D3 v4中的Zoomable树形图

Question

我试图根据以下示例在D3 v4中为我的树形图添加缩放行为:1和2.它是用HTML元素而不是SVG构建的,我通过使用百分比而不是像素单位使其响应.

它到目前为止工作得很好但现在我想通过点击放大到单个细胞,直到到达最后一个孩子.然后点击将返回到树的根.

到目前为止,这是我的代码:http://codepen.io/znak/pen/qapRkQ

我正在努力使用在V4中工作的缩放功能,它遍布整个地方:

function zoom(d) {

    console.log('clicked: ' + d.data.name);

    x.domain([d.x0, d.x1]);
    y.domain([d.y0, d.y1]);

    var t = d3.transition()
        .duration(800)
        .ease(d3.easeCubicOut);

    chart
        .merge(cell)
        .transition(t)
        .style("left", function(d) { return x(d.x0) + "%"; })
        .style("top", function(d) { return y(d.y0) + "%"; })
        .style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
        .style("height", function(d) { return y(d.y1 - d.y0) + "%"; });

    node = d; //?
    d3.event.stopPropagation(); //?
}

如何使用D3 v4更新和转换元素？

谢谢你的任何提示!

Answer 1

经过长时间的休息后，我注意到错误 \xe2\x80\x93 错误地将括号放在这里：

\n\n

.style("width", function(d) { return x(d.x1 - d.x0) + "%"; })\n.style("height", function(d) { return y(d.y1 - d.y0) + "%"; });\n

\n\n

它应该是：

\n\n

.style("width", function(d) { return x(d.x1) - x(d.x0) + "%"; })\n.style("height", function(d) { return y(d.y1) - y(d.y0) + "%"; });\n

\n\n

现在缩放功能正常。

\n\n

演示版

\n