Simple D3 horizontal tree example

[tlloyduk]

Hi Guys

Does anyone have a sample Architect4 project with a D3-tree working with AJAX ? I am struggling to get the Kitchen Sink example ported over to Architect and haven't found much docs on how to use it. The tree doesn't render correctly for me, it ends up all squashed and clicking the nodes doesn't do anything

e.g. https://snag.gy/jtGhHo.jpg

Thanks in advance

Tim

[tlloyduk]

OK so I looked in the sample projects and found the Kitchen Sink example is there, which is great, but it would be useful if someone could explain the custom reader - I take it this is necessary for any JSON you're loading, you can't just load it into a TreeStore and then the D3 chart can read it from there ? For example, if I have a TreeGrid working fine with a TreeStore and model I thought I could just use a D3-tree with the same store and it would work, but it appears this isn't the case

[petr.vecera]

Hi

I don't think it's necessary but ... When you look at the data json which is used in the kitchesink http://examples.sencha.com/extjs/6.5...ee/salary.json this is no way a correct tree. Thus custom reader transforms the data. http://examples.sencha.com/extjs/6.5...n#d3-view-tree so if your json data are already in format for d3 tree it should be OK.

Yep I don't think it's the best example because it doesn't show how the data should exactly look like.

But if you look at the docs http://docs.sencha.com/extjs/6.5.0/m...Hierarchy.html it looks like it need little bit more configs for each node than simple TreeGrid, so you will probably need custom reader to transform your data little bit.

[tlloyduk]

Hi Petr

Thanks for getting back to me. That doc is useful but some example JSON for the D3 components would be very useful, especially as it's a Premium add-on. I tried experimenting with the additional attributes from the doc but still not getting the tree to render.

So in my quest to find out what the JSON should look like, I built the Architect4 "D3 Hierarchy" project. Interestingly, this suffers from the same problem I do when the tree renders. Please see: https://snag.gy/Gm61fZ.jpg

It doesn't expand and it's all squashed up. I tried in IE and FF but both behave the same, so now I'm wondering if there is a bug ? The only example that seems to work is the Kitchen Sink but as you highlighted that's not the best example for out of the box tree.

Sencha Architect

Version:

4.2.2.282

Channel:

4.2-stable

Platform:

1.6.2.49 - win32 x64

Renderer:

56.0.2924.87

Cmd:

6.5.1.240

Framework:

Ext JS 6.5.x Classic

[petr.vecera]

Yep, I was able to make it work with SA.

I made the example the same way it's in the kitchesink:

Ext.define('MyApp.view.Tree', {    extend: 'Ext.Panel',
    alias: 'widget.tree',


    requires: [
        'MyApp.view.TreeViewModel',
        'MyApp.view.TreeViewController',
        'Ext.d3.hierarchy.tree.HorizontalTree',
        'Ext.d3.axis.Color',
        'Ext.d3.interaction.PanZoom'
    ],


    controller: 'tree',
    viewModel: {
        type: 'tree'
    },
    layout: 'fit',


    items: [
        {
            xtype: 'd3-tree',
            nodeText: function(component, node) {
                var record = node.data,
                    text = record.data.text;


                if (node.depth > 1) {
                    text += ' (' + Ext.util.Format.currency(record.data.salary, '$', 0) + ')';
                }


                return text;
            },
            padding: 10,
            tooltip: {
                renderer: 'onTooltip'
            },
            store: 'MyTreeStore',
            nodeRadius: 10,
            nodeSize: [
                300,
                40
            ],
            colorAxis: {
                field: 'id'
            },
            interactions: {
                type: 'panzoom',
                zoom: {
                    extent: [
                        0.3,
                        3
                    ],
                    doubleTap: false
                }
            }
        }
    ]


});

I think I changed the nodeRadius and nodeSize, result:

http://prntscr.com/ga1cyg

[tlloyduk]

That did the trick, how strange! Was looking for the problem in the wrong place all along, changing the nodeSize to [ 300, 40] made it sort itself out, I didn't even need any of the additional attributes

Thanks again