混合canvas/DIV方法的JS层次树示例

Examples of JS hierarchical tree with mixed canvas/DIV approach

本文关键字：层次 JS canvas DIV 方法 混合      更新时间：2023-09-26

我希望在网站上提供数据组的可视化，每个数据组包含多个字段。这些组在很大程度上以分层的方式与其他组相关联。

JavaScriptInfoVis工具包中的Spacetree示例提供了几乎所有的功能，但需要注意的是，整个图都呈现在画布上。因此，节点类型在视觉上仅限于画布绘图元素。

相反，我正在寻找一个库，它允许<div>s被渲染（每个都有我的多个字段、图标、Javascript功能等），并以类似于Spacetree示例的方式进行可视化链接。从本质上讲，一般概念类似于UML或数据库图。

我想我可以使用InfoVis工具包，覆盖我的<div>并限制交互性，但我想知道是否有人遇到过一个开箱即用的库（最好是免费的）。

它已经在这么做了！看看InvoVis网站上的例子，有一块javascript实际上正在为屏幕上显示的节点构建html节点。看起来，你所需要做的就是修改该部分以获取你的html区块：

//This method is called on DOM label creation.  
//Use this method to add event handlers and styles to  
//your node.  
onCreateLabel: function(label, node){  
    label.id = node.id;              
    label.innerHTML = node.name;  
    label.onclick = function(){  
        st.onClick(node.id);  
    };  
    //set label styles  
    var style = label.style;  
    style.width = 40 + 'px';  
    style.height = 17 + 'px';              
    style.cursor = 'pointer';  
    style.color = '#fff';  
    //style.backgroundColor = '#1a1a1a';  
    style.fontSize = '0.8em';  
    style.textAlign= 'center';  
    style.textDecoration = 'underline';  
    style.paddingTop = '3px';  
},

重要的线路是

label.innerHTML = node.name;
相关文章：