3

enter image description here

I am new to Cola JS. I have some nodes which point towards center node (upstream) and some nodes which point away from center nodes (nodes).

Attached is the screenshot of the layout.

I want fix upstream nodes above the center node and the downstream nodes below the center node.

var lineFunction = d3.svg.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; })
                .interpolate("linear");

            d3cola.start(10, 30, 100).on("tick", function () {
                node.each(function (d) { d.innerBounds = d.bounds.inflate(-margin); })
                    .attr("x", function (d) { return d.innerBounds.x; })
                    .attr("y", function (d) { return d.innerBounds.y; })
                    .attr("width", function (d) { return d.innerBounds.width(); })
                    .attr("height", function (d) { return d.innerBounds.height(); });

                link.attr("d", function (d) {
                    var route = cola.vpsc.makeEdgeBetween(d.source.innerBounds, d.target.innerBounds, 5);
                    return lineFunction([route.sourceIntersection, route.arrowStart]);
                });
                if (isIE()) link.each(function (d) { this.parentNode.insertBefore(this, this) });

                label
                    .attr("x", function (d) { return d.x })
                    .attr("y", function (d) { return d.y + (margin + pad) / 2 });

            });

Following is the json data

{
"edges": [
    { "source": "Relative Measurement", "target": "Pride", "type": "likes" },
    { "source": "Relative Measurement", "target": "Efficiency", "type": "likes" },
    { "source": "Relative Measurement", "target": "Business", "type": "likes" },
    { "source": "Relative Measurement", "target": "Certainty", "type": "likes" },
    { "source": "Relative Measurement", "target": "Business", "type": "likes" },
    { "source": "Relative Measurement", "target": "Business", "type": "likes" },
    { "source": "Relative Measurement", "target": "Computing", "type": "likes" },
    { "source": "Relative Measurement", "target": "Diversity", "type": "likes" },
    { "source": "Relative Measurement", "target": "Judgement", "type": "likes" },
    { "source": "Relative Measurement", "target": "Efficiency", "type": "likes" },
    { "source": "Relative Measurement", "target": "Judgement", "type": "likes" },
    { "source": "Relative Measurement", "target": "Business", "type": "likes" },
    { "source": "Relative Measurement", "target": "Certainty", "type": "dislikes" },
    { "source": "Relative Measurement", "target": "Resiliency", "type": "dislikes" },
    { "source": "Relative Measurement", "target": "Certainty", "type": "dislikes" },
    { "source": "Relative Measurement", "target": "Social", "type": "dislikes" },
    { "source": "Relative Measurement", "target": "Resiliency", "type": "dislikes" },
    { "source": "Knowing", "target": "Relative Measurement", "type": "dislikes" },
    { "source": "Structure", "target": "Relative Measurement", "type": "dislikes" },
    { "source": "Resiliancy", "target": "Relative Measurement", "type": "dislikes" },
    { "source": "Relative Measurement", "target": "Judgement", "type": "dislikes" }
]
}

Thanks in advance.

Shripad Ashtekar
  • 201
  • 3
  • 17
  • 2
    AFAIK you can use the same way you'd use in D3: https://stackoverflow.com/questions/10392505/fix-node-position-in-d3-force-directed-layout – Lars Kotthoff Nov 18 '15 at 18:41

0 Answers0