Layout with hierarchical grouping Cola.js a.type not a function?

Question

Heading ##Trying to get cola.js "Layout with hierarchical grouping" Set up.

Trying to create the following in my browser:

http://marvl.infotech.monash.edu/webcola/examples/gridifiedSmallGroups.html

I get the error:

d[a.type] is not a function

cola.min.js:2023 Uncaught TypeError: d[a.type] is not a function

 return a.d3adaptor = function() {
        var d = d3.dispatch("start", "tick", "end"),
            e = a.adaptor({
                trigger: function(a) {
                    d[a.type](a)
                },
                on: function(a, b) {
                    return d.on(a, b), e
                },
                kick: function(a) {
                    d3.timer(a)
                },
                drag: function() {
                    var a = d3.behavior.drag().origin(function(a) {
                        return a
                    }).on("dragstart.d3adaptor", b).on("drag.d3adaptor", function(a) {
                        a.px = d3.event.x, a.py = d3.event.y, e.resume()
                    }).on("dragend.d3adaptor", c);
                    return arguments.length ? void this.call(a) : a
                }
            });
        return e
    },

HTML

<html lang="en">
<head>
<meta charset="utf-8" />

<style>
.node {
  stroke: #fff;
  stroke-width: 1.5px;
    cursor: move;
}

.group {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: move;
  opacity: 0.7;
}

.link {
  stroke: #7a4e4e;
  stroke-width: 3px;
  stroke-opacity: 1;
}

.label {
    fill: white;
    font-family: Verdana;
    font-size: 25px;
    text-anchor: middle;
    cursor: move;
}

</style>
</head>
<body>
<script src="./d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="./cola.min.js"></script>


<script>
   var width = 960,
        height = 500;

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var cola = cola.d3adaptor(d3)
        .linkDistance(80)
        .avoidOverlaps(true)
        .handleDisconnected(false)
        .size([width, height]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    d3.json("smallgrouped.json", function (error, graph) {

        graph.nodes.forEach(function (v) {
            v.width = v.height = 95;
        })
        graph.groups.forEach(function (g) { g.padding = 0.01; });
        cola
            .nodes(graph.nodes)
            .links(graph.links)
            .groups(graph.groups)
            .start(100, 0, 50, 50);

        var group = svg.selectAll(".group")
            .data(graph.groups)
          .enter().append("rect")
            .attr("rx", 8).attr("ry", 8)
            .attr("class", "group")
            .style("fill", function (d, i) { return color(i); });

        var link = svg.selectAll(".link")
            .data(graph.links)
          .enter().append("line")
            .attr("class", "link");

        var pad = 20;
        var node = svg.selectAll(".node")
            .data(graph.nodes)
          .enter().append("rect")
            .attr("class", "node")
            .attr("width", function (d) { return d.width - 2 * pad; })
            .attr("height", function (d) { return d.height - 2 * pad; })
            .attr("rx", 5).attr("ry", 5)
            .style("fill", function (d) { return color(graph.groups.length); })
            .call(cola.drag)
            .on('mouseup', function (d) {
                d.fixed = 0;
                cola.alpha(1); // fire it off again to satify gridify
            });

        var label = svg.selectAll(".label")
            .data(graph.nodes)
           .enter().append("text")
            .attr("class", "label")
            .text(function (d) { return d.name; })
            .call(cola.drag);

        node.append("title")
            .text(function (d) { return d.name; });

        cola.on("tick", function () {
            link.attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });

            node.attr("x", function (d) { return d.x - d.width / 2 + pad; })
                .attr("y", function (d) { return d.y - d.height / 2 + pad; });

            group.attr("x", function (d) { return d.bounds.x; })
                 .attr("y", function (d) { return d.bounds.y; })
                .attr("width", function (d) { return d.bounds.width(); })
                .attr("height", function (d) { return d.bounds.height(); });

            label.attr("x", function (d) { return d.x; })
                 .attr("y", function (d) {
                     var h = this.getBBox().height;
                     return d.y + h/4;
                 });
        });
    });








</script>



</body>
</html>

JSON

{
    "nodes":[
      {"name":"a","width":60,"height":40},
      {"name":"b","width":60,"height":40},
      {"name":"c","width":60,"height":40},
      {"name":"d","width":60,"height":40},
      {"name":"e","width":60,"height":40},
      {"name":"f","width":60,"height":40},
      {"name":"g","width":60,"height":40}
    ],
    "links":[
      {"source":1,"target":2},
      {"source":2,"target":3},
      {"source":3,"target":4},
      {"source":0,"target":1},
      {"source":2,"target":0},
      {"source":3,"target":5},
      {"source":0,"target":5}
    ],
    "groups":[
      {"leaves":[0], "groups":[1]},
      {"leaves":[1,2]},
      {"leaves":[3,4]}
    ]
}

Answer 1

I meet the same issue. If you use d3v4 or later version, you will get this error. If you use d3v3, it works well.

Layout with hierarchical grouping Cola.js a.type not a function?

Question

Heading ##Trying to get cola.js "Layout with hierarchical grouping" Set up.

1 answers

solution1
0 2018-12-21 07:47:47

Layout with hierarchical grouping Cola.js a.type not a function?

Question

Heading ##Trying to get cola.js "Layout with hierarchical grouping" Set up.

1 answers

solution1 0 2018-12-21 07:47:47

solution1
0 2018-12-21 07:47:47