D3 v4中的可缩放树图

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

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

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

只需在重置树时确保删除类或样式即可！

除了Opera Mini外，所有主流浏览器（Chrome，FF，IE11 +）都支持pointer-events 。 请参阅caniuse.com上的浏览器兼容性 。 如果需要支持小于11的IE或Opera Mini，则可以操纵z-index或隐藏父级。

本质上，父母阻止孩子被选中，因此，如果您确定自己应该是​​好的！

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) + "%"; });

现在，变焦功能正常。

演示