Question

我有一个带有大型SVG区域的D3树，其位于弹性框内，其中“overflow：auto”允许用户平移/滚动树。树的节点位于左侧div的列表中。当我点击列表时我d3.select（“[id ='”+ nodeName +“']”）并选择有效的D3。

如何以编程方式滚动以将节点置于其容器的中心？我不确定这是HTML / DOM还是D3或两者兼而有之。

Answer 1

所以你可以在点击上放置一个监听器，如下所示：

d3.select(element).on('click', function(d) {
    centerNode(d);
});

然后您可以按照示例定义您的centerNode函数：

function centerNode(source) {
    var x = -source.y0 / 2;
    d3.select('g').transition()
        .duration(400)
        .attr('transform', 'translate(' + x + ',' + 0 + ')');
}

这将至少水平居中。如果你想垂直居中，你必须使用source.x0属性并将其用作translate函数的第二个参数。

Answer 2

我会留下一个可能的答案，但这有点像黑客......

    var y = node.__data__.x;
    var x = node.__data__.y;
    var contentElement = $("#content-area").get(0);
    var clientWidth = contentElement.clientWidth;
    var clientHeight = contentElement.clientHeight;
    var scrollWidth = contentElement.scrollWidth;
    var scrollHeight = contentElement.scrollHeight;
    var scrollX = ((x/svgWidth) * scrollWidth) - (clientWidth/2) ;
    var scrollY = ((y/svgHeight) * scrollHeight) - (clientHeight/2);
    $("#content-area").scrollLeft(scrollX);
    $("#content-area").scrollTop(scrollY);

完成工作。一些注意事项，如果你的单位不能翻译成像素，那么你的元素或你的缩放/翻译已经变得不可行了。也应该做夹紧等，但浏览器似乎没有呛到它： - ）

基本上它是SVG画布上的一个简单的像素到像素滚动窗口。

如何以编程方式滚动位于弹性框div内的D3 SVG树？

2 个答案: