javascript - 缺少标签 - Cola.js/D3.js-6ren

javascript - 缺少标签 - Cola.js/D3.js

转载作者：行者123 更新时间：2023-11-30 00:28:41

我正在尝试调整下面的 Cola.js 示例以使用内部 json 而不是点文件

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

我想将此图用作流程图。下面是我使用内部 json 创建的 fiddle -

var d3cola = cola.d3adaptor().convergenceThreshold(0.1);

var width = 960, height = 700;

var outer = d3.select("body").append("svg")
       .attr({ width: width, height: height, "pointer-events": "all" });

    outer.append('rect')
       .attr({ class: 'background', width: "100%", height: "100%" })
       .call(d3.behavior.zoom().on("zoom", function(d) {
          vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
       }));

var vis = outer
      .append('g')
      .attr('transform', 'translate(250,250) scale(0.3)');

     outer.append('svg:defs').append('svg:marker')
         .attr({
                id: 'end-arrow',
                viewBox: '0 -5 10 10',
                refX: 8,
                markerWidth: 6,
                markerHeight: 6,
                orient: 'auto'
            })
          .append('svg:path')
            .attr({
                d: 'M0,-5L10,0L0,5L2,0',
                'stroke-width': '0px',
                fill: '#000'});

      
	   
var nodes = [
       { "nodes": "Initiate"},
{ "nodes": "Update Comments of Requestor"},
{ "nodes": "Send to Requestor"},
{ "nodes": "Update Comments of FA Rejection"},
{ "nodes": "Finance Approves"},
{ "nodes": "Update Comments of FA"},
{ "nodes": "Update Comments of RM Rejection"},
{ "nodes": "Reporting Manager Approves"},
{ "nodes": "Update Comments of RM"},
{ "nodes": "Set Permissions on Bill for RM"},
{ "nodes": "Set Permissions on Bill after WF Complete"},
{ "nodes": "Send Notification to Requestor"},
{ "nodes": "Set Permissions on form for Finance"},
{ "nodes": "WF Completed Permissions on Attachments"},
{ "nodes": "Set Permissions on Bill for Requestor Rejected by RM"},
{ "nodes": "Move Bill To Tracking No Folder-2"},
{ "nodes": "Set Permissions on Form for Requestor Rejected by RM"},
{ "nodes": "Set Permissions on Attachments"},
{ "nodes": "Set Permissions-Tracking No. Folder"},
{ "nodes": "Set Permissions on Bill"},
{ "nodes": "Move Bill To Tracking No Folder-1"},
{ "nodes": "Set Permissions on Bill for Requestor"},
{ "nodes": "Set Permissions on Form for Requestor Rejected by FA"},
{ "nodes": "Set Permissions on form for Reporting Manager"},
{ "nodes": "Move Bill To Tracking No Folder"},
{ "nodes": "WF Completed Permissions on Form"},
{ "nodes": "End"}
		];

var edges = [
{ "source": 0,     "target": 18,     "type": "approve"  ,     "status": "completed"},
{ "source": 1,     "target": 20,     "type": "approve"  ,     "status": "completed"},
{ "source": 2,     "target": 1,     "type": "approve"  ,     "status": "completed"},
{ "source": 3,     "target": 22,     "type": "approve"  ,     "status": "completed"},
{ "source": 4,     "target": 3,     "type": "approve"  ,     "status": "completed"},
{ "source": 5,     "target": 25,     "type": "approve"  ,     "status": "completed"},
{ "source": 4,     "target": 5,     "type": "approve"  ,     "status": "completed"},
{ "source": 6,     "target": 16,     "type": "approve"  ,     "status": "completed"},
{ "source": 7,     "target": 6,     "type": "approve"  ,     "status": "completed"},
{ "source": 8,     "target": 19,     "type": "approve"  ,     "status": "completed"},
{ "source": 7,     "target": 8,     "type": "approve"  ,     "status": "completed"},
{ "source": 9,     "target": 7,     "type": "approve"  ,     "status": "completed"},
{ "source": 11,     "target": 4,     "type": "approve"  ,     "status": "completed"},
{ "source": 12,     "target": 11,     "type": "approve"  ,     "status": "completed"},
{ "source": 13,     "target": 10,     "type": "approve"  ,     "status": "completed"},
{ "source": 14,     "target": 15,     "type": "approve"  ,     "status": "completed"},
{ "source": 15,     "target": 2,     "type": "approve"  ,     "status": "completed"},
{ "source": 16,     "target": 14,     "type": "approve"  ,     "status": "completed"},
{ "source": 17,     "target": 23,     "type": "approve"  ,     "status": "completed"},
{ "source": 18,     "target": 17,     "type": "approve"  ,     "status": "completed"},
{ "source": 19,     "target": 24,     "type": "approve"  ,     "status": "completed"},
{ "source": 20,     "target": 23,     "type": "approve"  ,     "status": "completed"},
{ "source": 21,     "target": 2,     "type": "approve"  ,     "status": "completed"},
{ "source": 22,     "target": 21,     "type": "approve"  ,     "status": "completed"},
{ "source": 23,     "target": 9,     "type": "approve"  ,     "status": "completed"},
{ "source": 24,     "target": 12,     "type": "approve"  ,     "status": "completed"},
{ "source": 25,     "target": 13,     "type": "approve"  ,     "status": "completed"},
{ "source": 10,     "target": 26,     "type": "approve"  ,     "status": "completed"},
		];

	d3cola
       .avoidOverlaps(true)
       .convergenceThreshold(1e-3)
       .flowLayout('x', 150)
       .size([width, height])
       .nodes(nodes)
       .links(edges)
       .jaccardLinkLengths(150);

var link = vis.selectAll(".link")
             .data(edges)
             .enter().append("path")
             .attr("class", "link");

var margin = 10, pad = 12;
var node = vis.selectAll(".node")
            .data(nodes)
            .enter().append("rect")
            .classed("node", true)
            .attr({ rx: 5, ry: 5 })
            .call(d3cola.drag);

var label = vis.selectAll(".label")
            .data(nodes)
            .enter().append("text")
            .attr("class", "label")
            .text(function (d) { return d.name; })
            .call(d3cola.drag)
            .each(function (d) {
                    var b = this.getBBox();
                    var extra = 2 * margin + 2 * pad;
                    d.width = b.width + extra;
                    d.height = b.height + extra;
             });

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

var routeEdges = function () {
           d3cola.prepareEdgeRouting();
           link.attr("d", function (d) {
                 return lineFunction(d3cola.routeEdge(d));
           });
                if (isIE()) link.each(function (d) { this.parentNode.insertBefore(this, this) });
            }
        d3cola.start(50, 100, 200).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) {
                    cola.vpsc.makeEdgeBetween(d, d.source.innerBounds, d.target.innerBounds, 5);
                    var lineData = [{ x: d.sourceIntersection.x, y: d.sourceIntersection.y }, { x: d.arrowStart.x, y: d.arrowStart.y }];
                    return lineFunction(lineData);
                });
                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 });

            }).on("end", routeEdges);

        function isIE() { return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); }

  .background {
        stroke: white;
        stroke-width: 1px;
        fill: white;
    }

    .node {
        stroke: black;
        stroke-width: 1.5px;
        cursor: move;
        fill: lightcoral;
    }

    .link {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
        opacity: 0.7;
        marker-end: url(#end-arrow);
    }

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

<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

http://jsfiddle.net/gugr10ve/1/

该图似乎渲染得很好。但是，矩形内的标签丢失了。

有什么可能出错的建议吗？目标是扩大矩形以便标签适合？

谢谢

最佳答案

通过改变让它工作

.text(function (d) { return d.name; })

到

.text(function (d) { return d.nodes; })

var d3cola = cola.d3adaptor().convergenceThreshold(0.1);

var width = 960, height = 700;

var outer = d3.select("body").append("svg")
       .attr({ width: width, height: height, "pointer-events": "all" });

    outer.append('rect')
       .attr({ class: 'background', width: "100%", height: "100%" })
       .call(d3.behavior.zoom().on("zoom", function(d) {
          vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
       }));

var vis = outer
      .append('g')
      .attr('transform', 'translate(250,250) scale(0.3)');

     outer.append('svg:defs').append('svg:marker')
         .attr({
                id: 'end-arrow',
                viewBox: '0 -5 10 10',
                refX: 8,
                markerWidth: 6,
                markerHeight: 6,
                orient: 'auto'
            })
          .append('svg:path')
            .attr({
                d: 'M0,-5L10,0L0,5L2,0',
                'stroke-width': '0px',
                fill: '#000'});

      
	   
var nodes = [
       { "nodes": "Initiate"},
{ "nodes": "Update Comments of Requestor"},
{ "nodes": "Send to Requestor"},
{ "nodes": "Update Comments of FA Rejection"},
{ "nodes": "Finance Approves"},
{ "nodes": "Update Comments of FA"},
{ "nodes": "Update Comments of RM Rejection"},
{ "nodes": "Reporting Manager Approves"},
{ "nodes": "Update Comments of RM"},
{ "nodes": "Set Permissions on Bill for RM"},
{ "nodes": "Set Permissions on Bill after WF Complete"},
{ "nodes": "Send Notification to Requestor"},
{ "nodes": "Set Permissions on form for Finance"},
{ "nodes": "WF Completed Permissions on Attachments"},
{ "nodes": "Set Permissions on Bill for Requestor Rejected by RM"},
{ "nodes": "Move Bill To Tracking No Folder-2"},
{ "nodes": "Set Permissions on Form for Requestor Rejected by RM"},
{ "nodes": "Set Permissions on Attachments"},
{ "nodes": "Set Permissions-Tracking No. Folder"},
{ "nodes": "Set Permissions on Bill"},
{ "nodes": "Move Bill To Tracking No Folder-1"},
{ "nodes": "Set Permissions on Bill for Requestor"},
{ "nodes": "Set Permissions on Form for Requestor Rejected by FA"},
{ "nodes": "Set Permissions on form for Reporting Manager"},
{ "nodes": "Move Bill To Tracking No Folder"},
{ "nodes": "WF Completed Permissions on Form"},
{ "nodes": "End"}
		];

var edges = [
{ "source": 0,     "target": 18,     "type": "approve"  ,     "status": "completed"},
{ "source": 1,     "target": 20,     "type": "approve"  ,     "status": "completed"},
{ "source": 2,     "target": 1,     "type": "approve"  ,     "status": "completed"},
{ "source": 3,     "target": 22,     "type": "approve"  ,     "status": "completed"},
{ "source": 4,     "target": 3,     "type": "approve"  ,     "status": "completed"},
{ "source": 5,     "target": 25,     "type": "approve"  ,     "status": "completed"},
{ "source": 4,     "target": 5,     "type": "approve"  ,     "status": "completed"},
{ "source": 6,     "target": 16,     "type": "approve"  ,     "status": "completed"},
{ "source": 7,     "target": 6,     "type": "approve"  ,     "status": "completed"},
{ "source": 8,     "target": 19,     "type": "approve"  ,     "status": "completed"},
{ "source": 7,     "target": 8,     "type": "approve"  ,     "status": "completed"},
{ "source": 9,     "target": 7,     "type": "approve"  ,     "status": "completed"},
{ "source": 11,     "target": 4,     "type": "approve"  ,     "status": "completed"},
{ "source": 12,     "target": 11,     "type": "approve"  ,     "status": "completed"},
{ "source": 13,     "target": 10,     "type": "approve"  ,     "status": "completed"},
{ "source": 14,     "target": 15,     "type": "approve"  ,     "status": "completed"},
{ "source": 15,     "target": 2,     "type": "approve"  ,     "status": "completed"},
{ "source": 16,     "target": 14,     "type": "approve"  ,     "status": "completed"},
{ "source": 17,     "target": 23,     "type": "approve"  ,     "status": "completed"},
{ "source": 18,     "target": 17,     "type": "approve"  ,     "status": "completed"},
{ "source": 19,     "target": 24,     "type": "approve"  ,     "status": "completed"},
{ "source": 20,     "target": 23,     "type": "approve"  ,     "status": "completed"},
{ "source": 21,     "target": 2,     "type": "approve"  ,     "status": "completed"},
{ "source": 22,     "target": 21,     "type": "approve"  ,     "status": "completed"},
{ "source": 23,     "target": 9,     "type": "approve"  ,     "status": "completed"},
{ "source": 24,     "target": 12,     "type": "approve"  ,     "status": "completed"},
{ "source": 25,     "target": 13,     "type": "approve"  ,     "status": "completed"},
{ "source": 10,     "target": 26,     "type": "approve"  ,     "status": "completed"},
		];

	d3cola
       .avoidOverlaps(true)
       .convergenceThreshold(1e-3)
       .flowLayout('x', 150)
       .size([width, height])
       .nodes(nodes)
       .links(edges)
       .jaccardLinkLengths(150);

var link = vis.selectAll(".link")
             .data(edges)
             .enter().append("path")
             .attr("class", "link");

var margin = 10, pad = 12;
var node = vis.selectAll(".node")
            .data(nodes)
            .enter().append("rect")
            .classed("node", true)
            .attr({ rx: 5, ry: 5 })
            .call(d3cola.drag);

var label = vis.selectAll(".label")
            .data(nodes)
            .enter().append("text")
            .attr("class", "label")
            .text(function (d) { return d.nodes; })
            .call(d3cola.drag)
            .each(function (d) {
                    var b = this.getBBox();
                    var extra = 2 * margin + 2 * pad;
                    d.width = b.width + extra;
                    d.height = b.height + extra;
             });

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

var routeEdges = function () {
           d3cola.prepareEdgeRouting();
           link.attr("d", function (d) {
                 return lineFunction(d3cola.routeEdge(d));
           });
                if (isIE()) link.each(function (d) { this.parentNode.insertBefore(this, this) });
            }
        d3cola.start(50, 100, 200).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) {
                    cola.vpsc.makeEdgeBetween(d, d.source.innerBounds, d.target.innerBounds, 5);
                    var lineData = [{ x: d.sourceIntersection.x, y: d.sourceIntersection.y }, { x: d.arrowStart.x, y: d.arrowStart.y }];
                    return lineFunction(lineData);
                });
                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 });

            }).on("end", routeEdges);

        function isIE() { return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); }

  .background {
        stroke: white;
        stroke-width: 1px;
        fill: white;
    }

    .node {
        stroke: black;
        stroke-width: 1.5px;
        cursor: move;
        fill: lightcoral;
    }

    .link {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
        opacity: 0.7;
        marker-end: url(#end-arrow);
    }

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

<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

jsfiddle.net/gugr10ve/2

关于javascript - 缺少标签 - Cola.js/D3.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30448815/

文章推荐： mysql - SQL JOIN with And 子句和某些条件

文章推荐： android - 一个 intentService 不会被系统杀死？

文章推荐： mysql - 比较当前日期和上个月的日期

r - Leaflet R derivePolygons 缺少 lat 缺少 long
我正在尝试在 map 上绘制一些疾病事件数据的位置。我用它来导入数据: ByTown% addProviderTiles("CartoDB.Positron")%>% addPolygons
javascript - 缺少 ) 在使用异步等待的参数列表之后
我有一个文件调用 find.js，我使用 node find.js 运行，我的节点是版本 10 我不知道为什么我无法使用 async await。 const axios = require("axi
.net - 缺少 HttpContext
我有一个项目作为引用添加到 System.Web。但是，它似乎无法获取 HttpContext。这样做: Imports System.Web _ApplicationBase = HttpCont
java - 缺少 While 循环逻辑
在互联网上找到这段代码，出于某种原因它缺少 while 循环逻辑“while(i....)”，虽然我找到了 PigLatin* 问题的其他可行解决方案，但我真的很想了解这个正在工作。 *PigLati
缺少 TYPO3 管理后端模块
我工作了一整天来运行 Xampp 并在其上安装 TYPO3。现在我登录到后端，但没有显示许多管理模块，例如模板、访问等。 - 一定是我做错了什么，但我不知道。 these are the module
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
缺少 SQLite generate_series
我正在尝试使用 SQLite CLI，但无法获得 generate_series功能来工作。我可以按照文档中的建议使用递归 CTE 对其进行模拟，但我似乎无法获得该链接中的任何示例。这是我的 sess
缺少 .NET 运行时优化服务
我目前正在开发我想要的软件，而软件正在安装，它可以在后台为软件创建 native 图像。我正在考虑使用 NGEN 并将进程优先级设置为低，因为我不希望它消耗 100% CPU。但是我发现我的计算机上
缺少 XCode 仪器自动化
我想使用 Xcodes Instruments 进行 UI 自动化测试。但似乎缺少“自动化”。我怎样才能添加这个？最佳答案如果您想使用自动化仪器，请使用 Xcode 7.3。 Apple 在 Xc
javascript - 缺少创建逻辑
我目前在 JS 开发中迈出了一小步，并编写了以下链接添加器: const button = document.getElementById('button') const listdiv = docu
ios - 缺少[在开始消息中发送表达式
此代码有什么问题: NSError *error = nil; [SFHFKeychainUtils deleteItemForUsername:@"IAPNoob01" andServiceName
flash - 缺少 AGALMiniAssembler
出于某种原因，在安装和配置(我认为)一切之后，com.adobe.utils.AGALMiniAssembler 不见了，其他一切正常。我认为我已尽一切努力让孵化器正常工作，但显然我错过了一步。如
缺少 Perl 参数
我有一个名为 new 的方法。调用 new 时，我传递了一个参数，但是当我运行应用程序时，出现没有参数或参数为空的错误。 StepReader.pm package StepReader; use s
c - 缺少 locale_t
安装 gtk 1.2(包名 gtk1)和 macports chokes 在最终的 make 中，在 libintl.h 的第 440 行。 extern locale_t libintl_newlo
javascript - 为什么我在动态生成按钮时在参数列表后出现错误 - 缺少 )？
我用按钮创建表格。这是javascript代码: function layersListTable(layers) { var content =''; $.each($(layer
javascript 缺少 ) 参数
我在使用此 javascript 时遇到此错误，任何人都可以帮我弄清楚我做错了什么吗？ $(this).prepend('Check availability »'); 它给我错误 mis
android - 缺少 sync_val_compare_and_swap_1
我有一个独立的工具链 NDK13b、api19、llvm 3.8 编译器、arm 32 位、带有 libcpp(llvm C++ 库) 我想避免依赖 libgcc，所以我构建了 compiler-rt
缺少 AndroidManifest 文件
我按照一些教程使用 phonegap 的条形码扫描器插件。但是当我从现有源创建一个新的 android 项目来创建条码库时 (step 6 in this page)我收到错误:“AndroidMan
缺少 Android 布局编辑器
我现在尝试在 Eclipse 中打开我的布局 xml 文件。我只得到错误 No XML content. Please add a root view or layout to your docume
缺少 Android 层次结构查看器
我的 android-sdk-windows\tools 目录中缺少层次结构查看器工具。工具链接: http://developer.android.com/guide/developing/too

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 缺少标签 - Cola.js/D3.js