标签: infovis

这是截图

我一直在处理这个问题,试图修改Y的位置,没有任何运气.请注意,Meli Job B似乎未对齐.仅当父框附加到多个父项时才会发生这种情况.我尝试下面的代码来了解一个盒子是否有多个父母,但是我无法确定如何定位Y轴,因为它们都落在同一个地方.

码:

var pos = node.getPos();
var parents = node.getParents();
if(parents.length > 1) {
    var subnodes = node.getSubnodes();
    for(var i=0; i<subnodes.length; i++) {
        var yPos = subnodes[i].getPos();
        yPos.y = pos.y;
    }
}

在此先感谢您的帮助.

如果有人知道如何将html内容拖放到InfoViz Toolkit中的节点上,我很好奇.我需要能够检测用户何时尝试拖动图形外部的项目并将其放到其中一个节点上.

此外,我很好奇是否有人知道如何通过拖放将节点移动到新的父节点

我正在尝试使用在此处找到的JavaScript InfoVis Toolkit：JS InfoVis ToolKit创建强制定向图。我们实际上并不想使用JSON将数据“馈送”到图形中，而是希望手动添加节点。

我整理了以下代码-但是，当我尝试绘制图形时，在jit.js（var root = aGraph.getNode(id);）的7118行中找不到我的根节点。我已经省略了我的ForceDirected选项的详细信息-但这些不应影响结果。

        fd = new $jit.ForceDirected({...}) 
        //Create main node
        var rootNode = { id: "root", name: "Actors", data: { "$color": "#557EAA"} }
        fd.root = rootNode;
        fd.graph.addNode(rootNode);

        $.each(array, function (index, art) {
            var pubId = art.pubMedId.toString();
            var labelText = "Article " + pubId;
            var node = { id: pubId.toString(), name: labelText, data: { "$color": "#557EAA"} }

            //Create Nodes -- connect them to main node for now
            fd.graph.addNode(node);
            fd.graph.addAdjacence(rootNode, node, {}); …

我正在使用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>

手动截图 空白的印刷图像

我正在使用Javascript InfoVis SpaceTree.我有一棵树,如下所示:

http://zygonia.net/so/ex2.html

但是,我想选择"NOW"节点,以便突出显示返回根节点的路径,但阻止此节点居中.即:

http://zygonia.net/so/ex3.html

我试过setPos()但这不起作用.

有任何想法吗？

添加屏幕大小以防万一链接消失:

我一直在研究Infovis工具包项目,虽然所有功能都已完成,但我还是无法完成视觉效果.Infovis工具包API文档很好,但我的自定义节点类型不起作用.我正在使用高速,我想制作两种不同的自定义节点类型.一个来自图像,另一个来自绘制路径.非常感谢所有帮助,谢谢!

编辑:[我尝试的解决方案结果不是那么方便.相反,我使用来自JIT控制器的onCreateLabel()来自定义HTML节点.看到了性能的明显改善,并在定制节点方面获得了更大的灵活性.]

这是我到目前为止所提出的:

$jit.Hypertree.Plot.NodeTypes.implement({  
    'customNode': {  
         'render': function(node, canvas) {
            var img = new Image();
            img.src = "../icon.png";
            var pos = node.pos.getc(true);
            var ctx = canvas.getCtx();

            ctx.drawImage(img, pos.x-15, pos.y-15);                 
            /*
            //...And an other one like this but drawn as a path
            ctx.beginPath();
            ctx.moveTo(pos.x-25, pos.y-15);
            ctx.lineTo(25, -15);
            ctx.lineTo(-35, 0);
            ctx.closePath();
            ctx.strokeStyle = "#fff";
            ctx.fillStyle = "#bf5fa4";
            ctx.fill();
            ctx.stroke();*/
        }
       }
});

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

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 Toolkit,特别是SpaceTree可视化.

我需要展开所有树,然后显示从特定叶节点返回到根的路径.

我已经让树扩展得很好但是它选择了一个叶子节点并突出显示回到root的路径,这导致了一些问题.

我正在使用该ST.select(node, onComplete)函数来选择我感兴趣的叶节点,并且实际上突出显示返回根(线和节点)的路径.

为此,我实现了onBeforePlotNode和onBeforePlotLine ST.Controller方法,以允许我突出显示返回到根的节点及其绘图线:

onBeforePlotNode: function(node){  
  //add some color to the nodes in the path between the  
  //root node and the selected node.  
  if (node.selected) {  
    node.data.$color = "#dddddd";  
  } else {  
    delete node.data.$color;  
  }  
},
onBeforePlotLine: function(adj){
  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
    adj.data.$color = "#33CC33";
    adj.data.$lineWidth = 5;
  } else {
    delete adj.data.$color;
    delete adj.data.$lineWidth;
  }
}

问题是当我调用ST.select()突出显示叶子节点时,此级别下的所有子节点都被折叠/隐藏.

为了看到这一点,我上传了几个例子:

完整树扩展 - 未选择叶子选择 …

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

我想将一个php 数组转换为一个json 字符串，以便与 JavaScript InfoVis Toolkit formart 一起使用。

目标： InfoVis 演示树

Json 规范格式： InfoVis-加载和提供 JSON 数据

我有这个 php 数组： $my_array ：

Array 
( 
    [item_1] => Array 
        ( 
            [id] => item_1_ID 
            [name] => item_1_NAME 
            [data] => item_1_DATA 
            [children] => Array 
                ( 
                    [door] => Array 
                        ( 
                            [id] => door_ID 
                            [name] => door_NAME 
                            [data] => door_DATA 
                            [children] => Array 
                            ( 
                                [mozart] => Array 
                                    ( 
                                        [id] => mozart_ID 
                                        [name] => mozart_NAME 
                                        [data] => mozart_DATA 
                                        [children] => Array 
                                            ( 
                                                [grass] => …

具体来说，我正在研究JavaScript库；JavaScript InfoVis Toolkit和D3绘制流程图和状态机。

两者都提供了许多可视化数据的方法。但是，这些示例似乎都不符合以下要求（尤其是流程图）。

明确地说，我的意思是这些。

流程图

（资料来源：http : //philosophy.hku.hk/think/strategy/chart.php）

• 有带有单个起点和终点的分支。
• 节点和分支上的标签。
• 具有逻辑流程布局（例如，没有随机放置的节点）。
• 形状并不是很重要。

状态机

（来源：http : //www.oracle.com/technetwork/systems/fsm-156381.html）

• 节点和分支上的标签。
• 形状并不是很重要。

这些库中的任何一个都可以满足我的要求吗？

我的要求甚至适当地使用了那些库吗？

干杯，