标签: thejit

我看到很多人推荐用于组织结构图的JavaScript Visualization Toolkit(The JIT).我正在尝试使用SpaceTree的JavaScript InfoVis Toolkit来组织图表.在我的组织结构图中的节点,就像是本身有员工的个人档案相片组件,两种不同的图标显示其姓名,职务和报告的数量上点击叠加和简单的文本的一些三线......每一行分离通过浅水平线.就像是:

我的问题是,是否可以自定义spacetree节点？我可以让Node几乎像另一个具有自己的render方法的"组件"或JavaScript对象吗？

我在论坛上研究过,我考虑过的一些选项是:

1. $ jit.ST.NodeTypes.implement()...但是根据我看到的例子,这似乎有助于根据形状等定制节点,但不像上面绘制的布局.我指的是自定义是这样的: http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. 我尝试在example5.js中的onCreateLabel方法中设置innerHtml:但它似乎什么都不做.虽然,我不确定这是否是节点定制的好方法.Example5在JIT网站上(我不允许发布多个超链接)
3. 扩展Graph.Node ......我还在找这个选项,它这个时间点,我不知道它是多么复杂,有空间树利用Graph.myNode又会有怎样Graph.myNode甚至是什么样子？我需要在这些方面进行更多思考,看看它是否可行.

我需要为jit库创建一个自定义json .我应该使用额外的C#逻辑还是以某种方式扩展JsonSerializer.Json应该是这样的 - >

var json = {
    "children": [
 {
     "children": [
     {
         "children": [],
         "data": {
             "playcount": "276",
             "$color": "#8E7032",
             "image": "http://userserve-ak.last.fm/serve/300x300/11403219.jpg",
             "$area": 276
         },
         "id": "album-Thirteenth Step",
         "name": "Thirteenth Step"
     }
}] 

}

我正在使用JavaScript InfoVis Toolkit(http://thejit.org/)并尝试使用打印扩展的空间树可视化 canvas.toDataURL("image/png").虽然这适用于我的ForceDirected图形 - 在SpaceTree中,我们将标签放在单独的DIV中,因此当我打印图像时,我得到一个空白图形.

有谁知道如何打印标签？任何帮助将不胜感激.我附上了图表的手动屏幕截图和打印时获得的图像.

是的 - 我确实在这里看到了这个问题- 但它没有回答我的问题,因为我们不能使用"原生"标签,因为我们在飞行造型上做了一些.

HTML代码:

<div id="infovis" style="height: 412px;">
   <div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
     <canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
     <div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
           -- Labels are in here --
     </div>
   </div>
</div>

手动截图 空白的印刷图像

我正在尝试更改空间树中的默认方向,但无法确定添加位置:

st.switchPosition("top", "animate", {  
 onComplete: function() {  
   alert('completed!');  
 }  
});

这样树就会从顶部开始而不是默认的右边.

在我看过的例子中,switchPosition仅用于事件处理程序,我不打算这样做.

所以在示例中(取自infovis网站:Infovis - spacetree),我应该在哪里添加代码(或任何代码)以更改默认方向？

var labelType,useGradients,nativeTextSupport,animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || …

我是javascript编码的新手 - 任何人都可以帮助我使用InfoVis Spacetree吗？我试图将某个节点级别的宽度和高度设置为小于其余节点.好像我把它放在了数据中:{}但是当我试着把data:{"$height":"30"}它搞砸了整棵树......