philogb / jit

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web
http://thejit.org
Other
1.51k stars 297 forks source link

autoWidth and autoHeight are not working #85

Open ghost opened 13 years ago

ghost commented 13 years ago

I’m doing an attempt at creating a mind mapping application, and I want to visualize the mind map by using jit.

I’ve got the latest commit1, and I want to create a tree of nodes containing HTML. The HTML might be of any length and height. The tree could contain a label like “Things to do”, a label containing paragraph, or even label containing a table.

I want the labels to have a size set automatically based on their content, but I cannot get this to work by setting autoWitdth and autoHeight to true. These parameters don’t do anything.

I've got the source code on GitHub2, and this is the part of it that I think is relevant:

var st;
var json = {
    id: "n1",
    name: "root",
    data: {},
    children: [
        {
            id: "n2",
            name: "foo1<br>foo2<br>foo3",
            data: {},
            children: [
                // ...
            ]
        },
        {
            id: "n3",
            name: "bar",
            data: {},
            children: []
        },
        // ...
    ]
};

function init(){
    st = new $jit.ST({
        injectInto: 'view',

        Node: {
            autoHeight: true,
            autoWidth: true,
        },

        onCreateLabel: function(label, node){
            label.id = node.id;
            label.innerHTML = node.name;
            label.onclick = function() {
                st.select(node.id);
            };
        },
    });

    st.loadJSON(json);
    st.compute();
    st.select(st.root);
}
thomas-conere commented 12 years ago

I'm having the same problem :/

philogb commented 12 years ago

There's a test using autoHeight: true here. You can clone the project and run the example to see it working. More info on how to do that here.

Let me know if you have further questions.

thomas-conere commented 12 years ago

Thanks Nicolas.

gfileas commented 12 years ago

Sorry Nicolas but i have to confirm that at least myself can't make it work or i don't understand how this feature works. In the 'test6' node type is 'none' so practically only the label box is what is visible. I would be ok with that if the graph was plotted right. But there was gaps between connectors/edges and labels because i changed the value of padding for label (onCreateLabel() event).

So the only way to accomplish the autoHeight/autoWidth feature was to just iterate through json object, of course before loaded to ST and update the 'data' object for every node.