Closed mujtaba27 closed 2 years ago
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:
(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
Would it possible to share an Angular project Github code template with the aforementioned updates to show visualizer on a page? Thank you.
Can Anyone help me about how to integrate this library with angular 6