D3 v4 中的可缩放树状图

Question

我正在尝试根据以下示例向 D3 v4 中的树状图添加缩放行为：1 and 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

您的问题不是缩放功能，而是 1 级元素位于 2 级元素之前，因此当您单击它时，它会尝试缩放到相同的 1 级元素。

我认为最简单的解决方案是在缩放时分配 class 或使用 pointer-events: none 设置级别 1 元素的样式。这使得无法点击，因此当用户点击它时，它会掉落到 child，然后它将激活缩放。

请务必在重置树时删除 class 或样式！

pointer-events 在除 Opera Mini 之外的所有主要浏览器（Chrome、FF、IE11+）中均受支持。 See browser compatibility on caniuse.com。如果需要支持 11 以下的 IE 或者 Opera Mini，可以修改 z-index 或者隐藏 parent.

本质上，parent阻止了children被选中，所以如果你决定你应该是好的！

Answer 2

经过长时间的休息后，我发现了一个错误 – 错误地放置了括号：

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

应该是：

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

现在缩放功能正常了。

DEMO

D3 v4 中的可缩放树状图

Zoomable treemap in D3 v4

javascript

d3.js

treemap