Fatal编程技术网
  • d3.js/
  • D3.js 具有分层分组的布局Cola.js a.type不是函数？ 标题##正在尝试设置cola.js“分层分组布局”。

D3.js 具有分层分组的布局Cola.js a.type不是函数？ 标题##正在尝试设置cola.js“分层分组布局”。

d3.js

D3.js 具有分层分组的布局Cola.js a.type不是函数？ 标题##正在尝试设置cola.js“分层分组布局”。,d3.js,webcola,D3.js,Webcola,正在尝试在我的浏览器中创建以下内容： 我得到一个错误： d[a.type]不是一个函数 cola.min.js:2023未捕获类型错误：d[a.type]不是函数 HTML 我遇到了同样的问题。如果使用d3v4或更高版本，则会出现此错误。如果您使用d3v3，它工作得很好 return a.d3adaptor = function() { var d = d3.dispatch("start", "tick", "end"), e = a.adap

正在尝试在我的浏览器中创建以下内容：

我得到一个错误：

d[a.type]不是一个函数

cola.min.js:2023未捕获类型错误：d[a.type]不是函数

HTML

我遇到了同样的问题。如果使用d3v4或更高版本，则会出现此错误。如果您使用d3v3，它工作得很好

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

{
    "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]}
    ]
}