Results 1 to 6 of 6

Thread: Simple D3 horizontal tree example

  1. #1
    Sencha Premium User tlloyduk's Avatar
    Join Date
    Sep 2010
    Posts
    91
    Answers
    1

    Default Answered: Simple D3 horizontal tree example

    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

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

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

    Code:
    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

  3. #2
    Sencha Premium User tlloyduk's Avatar
    Join Date
    Sep 2010
    Posts
    91
    Answers
    1

    Default

    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

  4. #3
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    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.

  5. #4
    Sencha Premium User tlloyduk's Avatar
    Join Date
    Sep 2010
    Posts
    91
    Answers
    1

    Default

    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

  6. #5
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

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

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

    Code:
    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

  7. #6
    Sencha Premium User tlloyduk's Avatar
    Join Date
    Sep 2010
    Posts
    91
    Answers
    1

    Default

    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

Similar Threads

  1. Simple Horizontal Flow Layout
    By acerberus in forum Sencha GXT Discussion
    Replies: 6
    Last Post: 26 Oct 2012, 12:27 PM
  2. So simple, but i simple dont get it. How to refresh tree?
    By Kadifo in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 22 Jul 2010, 11:18 PM
  3. Horizontal Tree
    By neothematrix in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Apr 2010, 6:47 AM
  4. simple horizontal split on viewport layout
    By dirtdevil in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 27 Aug 2009, 12:54 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •