Question

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

JavaScript InfoVis工具包中的Spacetree examples提供了几乎所有功能，主要警告是整个图形呈现给画布。因此，节点类型在视觉上限制为画布绘图元素。

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

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

Answer 1

它已经做到了！查看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;

具有混合canvas / DIV方法的JS分层树的示例

1 个答案: