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

你的问题不是缩放功能，但是level-1元素位于level-2元素的前面，所以当你点击它时它会尝试缩放到相同的level-1元素。

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

请确保在重置树时删除类或样式！

除了Opera Mini之外，所有主流浏览器（Chrome，FF，IE11 +）都支持

pointer-events。 See browser compatibility on 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) + "%"; });

现在缩放功能正常。

DEMO

D3 v4中的Zoomable树形图

2 个答案: