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

現在，變焦功能正常。

演示