为d3-2way-tree添加水平和垂直滚动条，用于多层树

Adding a horizontal and vertical scroll bar for d3-2way-tree for multilevel tree

本文关键字：用于滚动条垂直 d3-2way-tree 添加水平更新时间：2023-09-26

我指的是d3小部件，http://bl.ocks.org/kanesee/5d6c48bffd4ea31201fb。我希望树在顶部和底部都能进一步增长，因为页面画布是固定的，我想添加滚动条，这样当图形增长时，我应该能够完全看到图表。

{
    "name": "Heirachy",
    "parents": [
        {
            "name": "Parent1",
            "isparent": true
        },
        {
            "name": "Parent2",
            "isparent": true
        },
        {
            "name": "Parent3",
            "isparent": true,
            "parents": [
                { 
                    "name" : "inner-parent3",
                    "isparent" : true,
                    "parents":[
                        {
                            "name" : "inner-most-parent3",
                            "isparent" : true
                        }
                    ]
                },
                { 
                    "name" : "outer-parent3",
                    "isparent" : true
                }
            ]
        }
    ],
    "children": [
        {
            "name": "Childern1",
            "isparent": false
        },
        {
            "name": "Childern2",
            "isparent": false
        },
        {
            "name": "Childern3",
            "isparent": false,
            "children": [
                { 
                    "name" : "inner-1-children3",
                    "isparent" : false
                },
                { 
                    "name" : "inner-2-children3",
                    "isparent" : false
                }
            ]
        },
        {
            "name": "Childern4",
            "isparent": false
        }
    ]
}

这是我的json数据，它使树垂直生长

用div将其包起来，并添加到CSS中:

overflow: scroll;

font - family:宋体;在CSS中指定div

overflow:auto;

新

为#categoryHierarchy添加父div

HTML

<div id="parentDiv">
  <div id="categoryHierarchy"></div>
</div>

CSS:

#parentDiv {
   margin:0 auto;
   overflow:auto;
   max-width:960px; // set width according to your requirement
   max-height:448px; // set height according to your requirement
}