Results 1 to 2 of 2

Thread: How to make an Interactive Vertical Tree using Ext.d3.hierarchy.Hierarchy?

  1. #1

    Default Answered: How to make an Interactive Vertical Tree using Ext.d3.hierarchy.Hierarchy?

    I'm at lost, never used the d3 lib, I want to accomplish the same thing as in KitchenSink Hierarchy - Org chart but I want it to be vertical instead of horizontal.
    I tried following this fiddle but when I collapse a node, the links are not being hidden, how can I hide the link when I collapse a node?

  2. The solution was very simple, i just had to change the getLinkPath to:

    Code:
    var midY = (link.source.y + (link.target.y - link.source.y) / 2);
    
    return 'M' + link.source.x + ',' + link.source.y
        + 'C' + link.target.x          + ',' + midY
        + ' ' + link.target.x          + ',' + midY
        + ' ' + link.target.x + ',' + link.target.y;
    and removeNodes to:

    Code:
    var me = this,
        selectedNode = me.nodeFromRecord(me.getSelection());
    
    
    selection
        .attr('opacity', 1)
        .transition(me.layoutTransition)
        .attr('opacity', 0)
        .attr('transform', function (node) {
        var p = node.parent, 
            d = selectedNode || p && me.nodeFromRecord(p.data),
            x = d && d.x || 0,
            y = d && d.y || 0;
        return 'translate(' + x + ',' + y + ')';
    })
        .remove();

  3. #2

    Default

    The solution was very simple, i just had to change the getLinkPath to:

    Code:
    var midY = (link.source.y + (link.target.y - link.source.y) / 2);
    
    return 'M' + link.source.x + ',' + link.source.y
        + 'C' + link.target.x          + ',' + midY
        + ' ' + link.target.x          + ',' + midY
        + ' ' + link.target.x + ',' + link.target.y;
    and removeNodes to:

    Code:
    var me = this,
        selectedNode = me.nodeFromRecord(me.getSelection());
    
    
    selection
        .attr('opacity', 1)
        .transition(me.layoutTransition)
        .attr('opacity', 0)
        .attr('transform', function (node) {
        var p = node.parent, 
            d = selectedNode || p && me.nodeFromRecord(p.data),
            x = d && d.x || 0,
            y = d && d.y || 0;
        return 'translate(' + x + ',' + y + ')';
    })
        .remove();

Posting Permissions

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