Integrating with Angular 6

[mujtaba27]

Can Anyone help me about how to integrate this library with angular 6

[szveisti]

Yes you can use it with some modifications choose what you need: - component.html

<div id="uploader">
    <input type="file" name="files" id="files"(change)="fileSelect($event)" /> <br /><br />
    <div id="canvas-container" class="row">
        <div id="canvas-wrapper" class="">
            <svg id="canvas"></svg>
        </div>
    </div>
    <div class="row">
        <div id="legend" class="col-md-4">
            <h6>Legend</h6>
            <ul id="legend-content"></ul>
        </div> 
        <div id="selected" class="col-md-8">
            <h6>Selected Node</h6>
            <div id="selection">
            </div>
        </div>
    </div>
</div>

• component.css add the contents of the css file to your own css file and modify it as desired

• you need the following folders assets/ stix2Viz/ d3 stix2Viz/ icons

and the js files:

• application.js
• stix2viz.js

(I created two js files and copied only the necessary functions. But you can use all of them, but with a lot of changes.)

modify the js files : for example: stix2viz.js

//add public variables:

var refRegex;
var refRegex;
var customConfig;
var legendCallback;
var selectedCallback;
var force;              
var labelForce;             
var svgTop;
var svg;
var typeGroups;
var typeIndex;
var currentGraph;
var labelGraph;
var idCache;
var d3Config;
var refsMapping;

INSTEAD
Viz.prototype.vizStix = function(content, config, callback, onError) {
....
}
USE THIS:
function Viz(canvas, config, legendCb, selectedCb) {
 vizReset();
 vizDef();   // set default values
...
}
// etc. It is necessary to change all functions

 function vizReset(){
        typeGroups = {};
        typeIndex = 0;
        currentGraph = {
          nodes: [],
          edges: []
        };
       labelGraph = {
          nodes: [],
          edges: []
       };
      idCache = {};
      force;
      labelForce;
      svg;
      $("#canvas").children("path").remove();  
      $("#canvas").children("g").remove();  
      $("#legend-content").children("li").remove();  
 };

function vizDef(){
   refRegex = /_refs*$/;
   customConfig;
   legendCallback;
   selectedCallback;
   force;           
   labelForce;       
   svgTop;
   svg;
   typeGroups = {};
   typeIndex = 0;
   currentGraph = {
      nodes: [],
      edges: []
   };
   labelGraph = {
     nodes: [],
     edges: []
  };
  idCache = {};
  d3Config = {};    
  refsMapping = {};
};

add the style and script paths to the 'angular.json' file "styles": [..css] "scripts": [..js] for example: "src/styles/js/d3.v3.min.js", etc.

use and enjoy by szveisti

[grfrtj]

Would it possible to share an Angular project Github code template with the aforementioned updates to show visualizer on a page? Thank you.