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

Question

我正在尝试调整下面的 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/

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

有什么可能出错的建议吗？ Objective是把矩形展开，让标签能放进去？

谢谢

Answer 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

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

Missing labels - Cola.js/D3.js

javascript

data-visualization

d3.js