Wie zeichne ein Multi-Stack, viele zu viele Beziehung Diagramm, etwas wie im beigefügten Bild, mit JavaScript?

-1

Wie zeichne ein Multi-Stack, viele zu viele Beziehung Diagramm, etwas wie im beigefügten Bild, mit JavaScript?

Ich möchte ein Beziehungsdiagramm (so etwas wie im obigen Bild) mit JavaScript zeichnen. Ich habe viele js Bibliotheken wie D3, GoJs, JsPlumb, usw. ausprobiert, aber nichts hat für meine Anforderung ausgearbeitet. Nachfolgend finden Sie die zusätzlichen Anforderungen.

Die Boxen (z. B. Business Architecture> Process> Resolve Complaint) können bis zu vier innere Ebenen haben.
Jede Box kann mit jeder Box (intern - mit - in der Gruppe und extern - mit den Knoten in den anderen Gruppen) verbunden werden
Beziehung kann uni und bidirektional sein (eine Seite Pfeil und Doppelseite) Pfeil) und sollte Beziehungstyp (zB Prozess) haben.
Jede Box (in allen Ebenen) vier anklickbare Hotspots
als Vorlage können gespeichert für zukünftige Änderung
Daten-Feed ist JSON

Quelle

2017-07-06 kumling

Diese Lösung wird erstellt in GoJS haben sollte.

Hier ist das Ergebnis. Entschuldigung, ich hatte nicht das Gefühl, alle Daten von deinem Screenshot einzugeben, also habe ich nur die beiden obersten Gruppen gemacht. Und ich habe mich auch nicht darum gekümmert, Sachen hübsch zu stylen.

Und hier ist die komplette Seite, einschließlich der Modelldaten im JSON-Format des Diagramms:

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple Nested Relationships in GoJS</title> 
<!-- Copyright 1998-2017 by Northwoods Software Corporation. --> 
<meta charset="UTF-8"> 
<script src="go.js"></script> 
<script id="code"> 
    function init() { 
    var $ = go.GraphObject.make; 

    myDiagram = 
     $(go.Diagram, "myDiagramDiv", 
     { 
      initialContentAlignment: go.Spot.Center, 
      "undoManager.isEnabled": true 
     }); 

    function makePort(id, spot) { 
     return $(go.Shape, 
     { 
      fill: "transparent", strokeWidth: 0, 
      width: 10, height: 10, 
      alignment: spot, alignmentFocus: spot, 
      portId: id, 
      fromLinkable: true, toLinkable: true, cursor: "pointer" 
     }); 
    } 

    myDiagram.nodeTemplate = 
     $(go.Node, "Spot", 
     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 
     $(go.Panel, "Auto", 
      $(go.Shape, "RoundedRectangle", 
      { fill: "white" }, 
      new go.Binding("fill", "color"), 
      new go.Binding("figure"), 
      new go.Binding("angle", "figure", function(f) { return f === "Hexagon" ? 90 : 0; })), 
      $(go.TextBlock, 
      { margin: 4, editable: true, maxSize: new go.Size(150, NaN), textAlign: "center" }, 
      new go.Binding("text").makeTwoWay()) 
     ), 
     makePort("T", go.Spot.Top), 
     makePort("R", go.Spot.Right), 
     makePort("B", go.Spot.Bottom), 
     makePort("L", go.Spot.Left) 
    ); 

    myDiagram.groupTemplate = 
     $(go.Group, "Spot", 
     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 
     $(go.Panel, "Auto", 
      $(go.Shape, 
      { fill: "whitesmoke" }, 
      new go.Binding("fill", "color"), 
      new go.Binding("stroke", "color", go.Brush.darken)), 
      $(go.Panel, "Vertical", 
      $(go.TextBlock, 
       { margin: 4, editable: true }, 
       new go.Binding("text").makeTwoWay()), 
      $(go.Placeholder, { padding: 10 }) 
     ) 
     ), 
     makePort("T", go.Spot.Top), 
     makePort("R", go.Spot.Right), 
     makePort("B", go.Spot.Bottom), 
     makePort("L", go.Spot.Left) 
    ); 

    myDiagram.linkTemplate = 
     $(go.Link, 
     $(go.Shape, { strokeWidth: 2 }), 
     $(go.Shape, { fromArrow: "Standard", visible: false }, 
      new go.Binding("visible", "from")), 
     $(go.Shape, { toArrow: "Standard" }), 
     $(go.TextBlock, 
      { font: "11px sans-serif", editable: true }, 
      new go.Binding("text").makeTwoWay()) 
    ); 

    myDiagram.model = go.Model.fromJson(
     '{ "class": "go.GraphLinksModel",\ 
     "linkFromPortIdProperty": "fp",\ 
     "linkToPortIdProperty": "tp",\ 
     "nodeDataArray": [\ 
      { "key": 1, "text": "Strategic Planning", "color": "lightgreen", "isGroup": true, "loc": "10.5 22" },\ 
      { "key": 11, "text": "Business Policy", "color": "rgba(182, 255, 180, 1)", "isGroup": true, "group": 1, "loc": "21 116" },\ 
      { "key": 111, "text": "Adhere to FSA Guidelines", "color": "lightgreen", "figure": "Hexagon", "group": 11, "loc": "31 126" },\ 
      { "key": 12, "text": "Strategy", "color": "rgba(182, 255, 180, 1)", "isGroup": true, "group": 1, "loc": "162 55" },\ 
      { "key": 121, "text": "Adopt Customer\\nComplaints Process", "color": "lightskyblue", "group": 12, "loc": "172 65" },\ 
      { "key": 122, "text": "Mission and\\nVision", "color": "plum", "group": 12, "loc": "274 136" },\ 
      { "key": 123, "text": "Improve Customer Satisfaction", "color": "lightskyblue", "group": 12, "loc": "177 206" },\ 
      { "key": 124, "text": "Decisions made wlil Maximize Benefit to the Enterprise", "color": "lightskyblue", "group": 12, "loc": "304 203" },\ 
      { "key": 2, "text": "Business Architecture", "color": "silver", "isGroup": true, "loc": "503 21" },\ 
      { "key": 21, "text": "Process", "color": "lightgray", "isGroup": true, "group": 2, "loc": "514 54" },\ 
      { "key": 211, "text": "Complaints\\n Handling", "color": "lightgreen", "figure":"Hexagon", "group": 21, "loc": "546 35" },\ 
      { "key": 212, "text": "Resolve \\nComplaint", "color": "lightskyblue", "group": 21, "loc": "679 64" },\ 
      { "key": 213, "text": "Complaints\\n Handling", "color": "lightskyblue", "group": 21, "loc": "550 145" },\ 
      { "key": 22, "text": "Organization", "color": "lightgray", "isGroup": true, "group": 2, "loc": "842 55" },\ 
      { "key": 221, "text": "Complaints \\nCall Handler", "color": "lightskyblue", "group": 22, "loc": "852 65.6" },\ 
      { "key": -18, "text": "Complaints \\nClient", "color": "lightskyblue", "group": 22, "loc": "854 142" },\ 
      { "key": -19, "text": "Complaints \\nManager", "color": "lightskyblue", "group": 22, "loc": "852 225" },\ 
      { "key": 23, "text": "Business Service", "color": "lightgray", "isGroup": true, "group": 2, "loc": "514 217" },\ 
      { "key": 231, "text": "Manage \\nComplaints", "color": "lightskyblue", "group": 23, "loc": "550 247" }\ 
     ],\ 
      "linkDataArray": [\ 
      { "from": 111, "to": 123, "fp": "R", "tp": "L" },\ 
      { "from": 121, "to": 123, "fp": "B", "tp": "T", "text": "Process" },\ 
      { "from": 121, "to": 122, "fp": "B", "tp": "T", "text": "Process" },\ 
      { "from": 121, "to": 211, "fp": "R", "tp": "L", "text": "Process" },\ 
      { "from": 121, "to": 231, "fp": "R", "tp": "L", "text": "Process" },\ 
      { "from": 211, "to": 213, "fp": "B", "tp": "T", "text": "Process type:\\nProcess" },\ 
      { "from": 231, "to": 213, "fp": "T", "tp": "B", "text": "Process" },\ 
      { "from": 231, "to": 212, "fp": "T", "tp": "B" },\ 
      { "from": 212, "to": -19, "fp": "B", "tp": "L", "text": "Process" },\ 
      { "from": 212, "to": -18, "fp": "B", "tp": "L", "text": "Process" },\ 
      { "from": 212, "to": 221, "fp": "R", "tp": "L", "text": "Process" }\ 
      ]\ 
     }' 
    ); 
    } 
</script> 
</head> 
<body onload="init()"> 
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div> 
</body> 
</html>

Quelle

2017-07-06 21:44:23

Dank WN! Es entspricht genau meiner Anforderung. Ich habe auch vorher GoJs ausprobiert, aber ich konnte es nicht richtig machen, aber trotzdem kann ich keine anklickbaren Knoten/Elemente in das Diagramm einfügen. Könnten Sie mir bitte dabei helfen? – kumling

Das ist einfach zu implementieren, wenn Sie mit der Verwendung von Panels beim Hinzufügen von Objekten und dem Deklarieren von Event-Handlern für Objekte vertraut sind. Lesen Sie http://gojs.net/latest/intro/panels.html und http://gojs.net/latest/intro/events.html –

Wie zeichne ein Multi-Stack, viele zu viele Beziehung Diagramm, etwas wie im beigefügten Bild, mit JavaScript?

Antwort

Verwandte Themen