个人中心
gpt4 book ai didi

d3.js - 带有分层分组的布局 Cola.js a.type 不是函数？

转载 作者：行者123 更新时间：2023-12-03 21:26:04 27 4
gpt4 key购买 nike

标题##trying to get cola.js“布局分层分组”设置。

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

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

我收到错误:

d[a.type] 不是函数

cola.min.js:2023 Uncaught TypeError: d[a.type] 不是函数

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

最佳答案

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

关于d3.js - 带有分层分组的布局 Cola.js a.type 不是函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48197713/

27 4 0
文章推荐： node.js - AWS Beanstalk 错误 : Cannot find module
文章推荐： typescript - 使用 any 键入交叉点
文章推荐： firebase-security - Firestore 规则，什么是集合和文档？
文章推荐： typescript - 未处理的 promise 拒绝 : Rx_1. 主题不是构造函数；区域 : ; Task: Promise. 然后；值 : TypeError: Rx_1. 主题不是构造函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com