javascript - 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 为 level-1 元素分配一个类或设置其样式。这使得无法点击，因此当用户点击它时，它会落到 child 身上，然后 child 会激活缩放。

请务必在重置树时删除类或样式!

pointer-events 在除 Opera Mini 之外的所有主流浏览器(Chrome、FF、IE11+)中均受支持。 See browser compatibility on caniuse.com .如果您需要支持 11 以下版本的 IE 或 Opera Mini，您可以操纵 z-index 或隐藏父级。

从本质上讲， parent 阻止了 child 被选中，所以如果你下定决心，你应该是好人!