chart = {
const dx = 600;
const dy = width / 6;
const margin = ({top: 10, right: 120, bottom: 10, left: 40});
const memberBox = {
width: 205,
height: 65,
marginHeight: 80,
marginWidth: 50
};
const direction = 1;
const zoom = d3.zoom()
.scaleExtent([0.5, 2])
.on("zoom", zoomed);
const tree = d3.tree()
.nodeSize([memberBox.height + memberBox.marginHeight, memberBox.width + memberBox.marginWidth])
.separation(() => 0.5)
;
const root = d3.hierarchy(attack_tree[0], d => d.nodes);
console.log('root: ', root);
console.log(`width: ${width}`);
root.x0 = dy / 20;
root.y0 = 0;
root.descendants()
.forEach((node, i) => {
node.id = i;
node._children = node.children;
});
const svg = d3.create("svg")
.attr('viewBox', [-margin.left, -margin.top, width, dx])
// .on('click', reset);
;
const gContainer = svg.append('g')
.attr('cursor', 'grab')
.attr('id', 'SVGcontainer')
.classed('svg-content-responsive', true);
const gLink = gContainer.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = gContainer.append("g")
.attr('id', 'node-container')
.attr("cursor", "pointer")
.attr("pointer-events", "all")
;
// svg.call(
// zoom.transform,
// d3.zoomIdentity.translate(150, 0)
// .scale(1)
// );
svg.call(zoom);
function reset() {
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([150, height / 2])
);
}
function update(source) {
console.log('update with source: ', source);
const nodes = root.descendants().reverse();
const links = root.links();
const duration = event?.altKey ? 2500 : 250; // hold the alt key to slow down the transition
// compute the new tree layout.
tree(root);
// find min & max x (vertical)
let left = root;
let right = root;
root.eachBefore(node => {
if (node.x < left.x) { left = node; }
if (node.x > right.x) { right = node; }
});
let height = right.x - left.x + margin.top + margin.bottom;
height = Math.max(height, 320);
const transition = svg.transition()
.duration(duration)
.ease(d3.easeQuad)
.attr("viewBox", [-margin.left, left.x - margin.top, width, height])
.tween("resize", window.ResizeObserver ? null : () => svg.dispatch("toggle"));
// update the nodes...
const node = gNode.selectAll('g.node')
.data(nodes, d => d.id)
// @ts-ignore
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
;
// Enter any new nodes at the parent's previous position.
const nodeEnter = node.enter().append('g')
.attr("transform", d => `translate(${source.y0},${source.x0})`)
.attr('fill-opacity', 0)
.attr('stroke-opacity', 0)
.attr('class', (node) => addNodeClasses(node));
nodeEnter.append('rect')
.attr('class', 'frame')
.attr('x', 0)
.attr('y', 0)
.attr('width', 0)
.attr('height', 0);
// add expandIcon
addExpandIcon(nodeEnter);
addText(nodeEnter);
nodeEnter.append('path')
.attr('class', 'blessing-indicator')
.attr('d', 'M0 0 L10 0, 0 10 Z')
.attr('stroke-width', 1)
.style('fill-opacity', 0)
.style('stroke-opacity', 0);
// Transition nodes to their new position.
const nodeUpdate = node.merge(nodeEnter)
.transition(transition)
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
nodeUpdate.select('rect.frame')
.attr('fill-opacity', 1)
.attr('stroke-opacity', 1)
.attr('x', -(memberBox.width / 2))
.attr('y', -(memberBox.height / 2))
.attr('width', memberBox.width)
.attr('height', memberBox.height);
nodeUpdate.select('path.blessing-indicator')
.style('fill-opacity', 1)
.style('stroke-opacity', 1)
.attr('transform', `translate(${-memberBox.width / 2 + 1}, ${-memberBox.height / 2 + 1})`);
nodeUpdate.select('.expandIcon')
.style('visibility', (node) => {
// const person = node.data;
// console.log('expandIcon node: ', node);
// const v = (person.nodes?.length > 0) || false;
const v = (node.children?.length > 0) || (node._children?.length > 0);
// console.log('expandIcon visible: ', v);
return v ? 'visible' : 'hidden';
})
.style('fill-opacity', 1)
.style('stroke-opacity', 1)
// .attr('name', (d) => { console.log('nodeUpdate expandIcon d: ', d); })
;
// Transition exiting nodes to the parent's new position.
const nodeExit = node.exit()
.transition(transition)
.remove()
.attr("transform", d => `translate(${direction * source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
nodeExit.select('path.blessing-indicator')
.style('fill-opacity', 0)
.style('stroke-opacity', 0)
.attr('transform', 'translate(0, 0)');
// Update the links…
const link = gLink.selectAll("path")
.data(links, d => d.target.id);
// Enter any new links at the parent's previous position.
const linkEnter = link.enter().append("path")
.attr("d", d => {
const o = {x: source.x0, y: source.y0};
return transitionElbow({source: o, target: o});
});
// Transition links to their new position.
link.merge(linkEnter)
.transition(transition)
.attr("d", (d) => {
return elbow(d, direction);
});
// Transition exiting nodes to the parent's new position.
link.exit()
.transition(transition)
.remove()
.attr("d", d => {
const o = {x: source.x, y: source.y};
return transitionElbow({source: o, target: o});
});
// Stash the old positions for transition.
root.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}; // end Update
function zoomed({transform}) {
gContainer.attr("transform", transform);
}
function dragstarted() {
// @ts-ignore
d3.select(this).raise();
gContainer.attr("cursor", "grabbing");
}
function dragged(event, d) {
// @ts-ignore
d3.select(this).attr("cx", d.x = event.x).attr("cy", d.y = event.y);
}
function dragended() {
gContainer.attr("cursor", "grab");
}
function addNodeClasses(node) {
const displayClasses = ['node', 'layer'];
const layer_object = node.data;
const layer_type = node.data.type;
console.log('layer_object: ', layer_object);
console.log('layer_type: ', layer_type);
console.log();
if (layer_type === 'tactics') {
displayClasses.push('column');
displayClasses.push('tactic');
} else if (layer_type === 'matrix') {
displayClasses.push('table');
displayClasses.push('matrix');
} else if (layer_type === 'techniques') {
displayClasses.push('technique');
displayClasses.push('row');
} else if (layer_type === 'subtechnique') {
displayClasses.push('subtechnique');
displayClasses.push('sub-row');
} else if (layer_type === 'technique_detail') {
displayClasses.push('technique_detail');
} else {
displayClasses.push('unknown');
}
return displayClasses.join(' ');
}
function addExpandIcon(nodeEnter) {
let expandIcon = nodeEnter.append('g')
.attr('class', 'expandIcon')
.attr('transform', (d) => `translate(${(memberBox.width / 2 - 15)},${-10})`);
expandIcon.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 3)
.attr('fill', '#aaa');
expandIcon.append('circle')
.attr('cx', 0)
.attr('cy', 10)
.attr('r', 3)
.attr('fill', '#aaa');
expandIcon.append('circle')
.attr('cx', 0)
.attr('cy', 20)
.attr('r', 3)
.attr('fill', '#aaa');
expandIcon.append('rect')
.attr('class', 'box')
.attr('x', -8)
.attr('y', -8)
.attr('width', 16)
.attr('height', 36)
.style('fill-opacity', 0)
.style('stroke-opacity', 0)
.on('click', (event, d) => {
// event.stopPropagation();
if (d.children) {
d._children = [...d.children];
d.children = null;
} else if (d._children) {
d.children = [...d._children];
d._children = null;
}
update(d);
});
}
function addText(nodeEnter) {
const yOffset = 10;
nodeEnter.append('text')
.attr('dx', -(memberBox.width / 2) + 10)
.attr('dy', (-memberBox.height / 2) + 25 + yOffset)
.attr('text-anchor', 'left')
.attr('class', 'name')
.attr('level', (d) => d.data.level)
.on('click', (event, d) => {
event.stopPropagation();
console.warn('Show modal for: ', d.data.name);
})
.text((d) => nodeName(d)) // Check for null firstName in the case of 'Unknown' lastName.
.style('fill-opacity', 1);
}
function nodeName(node) {
console.log("@@@@@@@@@@@@@@@@@",node);
console.log(node.data, "&&&&&&&&&&&&&&&");
const stix = node.data["stix"];
const stix_type = node.data["type"];
let name = "";
let ext_id = "";
if (stix_type === 'tactics') {
name = stix.name;
ext_id = stix["external_references"][0]["external_id"];
} else if (stix_type === 'matrix') {
name = stix.name;
ext_id = "";
} else if (stix_type === 'techniques') {
name = stix.name;
ext_id = stix["external_references"][0]["external_id"];
} else if (stix_type === 'subtechnique') {
name = stix.name;
ext_id = stix["external_references"][0]["external_id"];
} else if (stix_type === 'technique_detail') {
name = "details";
ext_id = "test";
} else {
name = node;
}
return ext_id + ": " + name;
}
update(root);
return svg.node();
}
attack_tree = FileAttachment("attack_tree@1.json").json()
height = 600
d3 = require('d3@7')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
