Commit 037f101c authored by Andrew Danger Lyon's avatar Andrew Danger Lyon

adding node click event (just console logs the datum) and doing some general cleanup.

parent 5eb4d101
......@@ -57,6 +57,7 @@ module.exports = function Vizz(options) {
d3.select('.network').select('svg').call(pan_dragger);
const node_dragger = d3.drag()
.clickDistance(50)
.on('drag', function() {
const e = d3.event;
e.subject.fx = e.x;
......@@ -71,11 +72,21 @@ module.exports = function Vizz(options) {
})
.container(() => svg_node);
vizzbus.on('node-add', () => {
// NOTE: node-add is called AFTER we add the element to data, but BEFORE
// we enter the data into d3, so we need a short delay to make sure d3
// has our node
setTimeout(() => {
svg.select('.nodes').selectAll('.node')
.attr('cursor', 'pointer')
.call(node_dragger);
}, 500);
svg.select('.nodes').selectAll('.node')
.on('click', function(d) {
vizzbus.emit('node-info', d);
});
}, 200);
});
vizzbus.on('node-info', (d) => {
console.log('INFO: ', d);
});
svg.append('g')
......@@ -88,6 +99,7 @@ module.exports = function Vizz(options) {
svg.append('g').attr('class', 'links');
svg.append('g').attr('class', 'pings');
svg.append('g').attr('class', 'nodes');
var d3_nodes = null;
var d3_links = null;
var d3_pings = null;
......@@ -99,8 +111,6 @@ module.exports = function Vizz(options) {
.attr('y1', (d) => d.source.y)
.attr('x2', (d) => d.target.x)
.attr('y2', (d) => d.target.y);
d3_links.each((link) => {
});
}
if(d3_pings) {
const ping_pos = (d, attr) => {
......@@ -119,7 +129,6 @@ module.exports = function Vizz(options) {
.attr('transform', (d) => `translate(${d.x}, ${d.y})`);
}
};
const scale = 1 / 768;
const linkforce = d3.forceLink()
.id((d) => d.id)
.strength((d) => {
......@@ -142,64 +151,51 @@ module.exports = function Vizz(options) {
'_': 100,
};
const dist = dist_map[d.type] || dist_map['_'];
return Math.min(width, height) * dist * scale;
return dist;
});
const centerx = d3.forceX(() => 0)
.strength((d) => d.type == 'consumer' ? -0.0004 : 0.001);
const centery = d3.forceY(() => 0)
.strength((d) => d.type == 'consumer' ? -0.0004 : 0.001);
const radial_map = {
'consumer': {
radius: () => (Math.min(width, height) / 2) - 30,
strength: () => 1 / 5,
},
// NOTE: disabled. be free, companies.
'_company': {
radius: () => (Math.min(width, height) / 4) - 30,
strength: () => 1 / 10,
},
};
const radial_force = (d, axis) => {
const entry = radial_map[d.type];
if(!entry) return d[axis];
let xy = null;
if(true) {
const filtered = nodes.filter((f) => f.type == d.type);
const pos = filtered.findIndex((i) => i.id == d.id);
xy = Radial.place(pos, {
radius: entry.radius(d),
centerx: 0,
centery: 0,
len: filtered.length,
});
} else {
xy = Radial.nearest(d.x, d.y, {
radius: entry.radius(d),
centerx: 0,
centery: 0,
});
}
const filtered = nodes.filter((f) => f.type == d.type);
const pos = filtered.findIndex((i) => i.id == d.id);
xy = Radial.place(pos, {
radius: entry.radius(d),
centerx: 0,
centery: 0,
len: filtered.length,
});
return xy[axis];
};
const radialx = d3
.forceX((d) => radial_force(d, 'x'))
.strength((d) => radial_map[d.type] ? radial_map[d.type].strength() : 0);
const radialy = d3
.forceY((d, i) => radial_force(d, 'y'))
.forceY((d) => radial_force(d, 'y'))
.strength((d) => radial_map[d.type] ? radial_map[d.type].strength() : 0);
const repulse = d3.forceManyBody()
.strength((d) => d.type == 'consumer' ? -5 : -20)
.distanceMax((d) => d.type == 'consumer' ? 80 : 200);
const centerx = d3.forceX(() => 0)
.strength((d) => d.type == 'consumer' ? -0.0004 : 0.001);
const centery = d3.forceY(() => 0)
.strength((d) => d.type == 'consumer' ? -0.0004 : 0.001);
const force = d3.forceSimulation()
.alphaDecay(1 - Math.pow(0.001, 1 / 600))
.velocityDecay(0.3)
.force('link', linkforce)
.force('charge', repulse)
.force('centerx', centerx)
.force('centery', centery)
.force('radialx', radialx)
.force('radialy', radialy)
.force('centerx', centerx)
.force('centery', centery)
.on('tick', ticked);
vizzbus.on('force-reset', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment