diff --git a/config/config.json b/config/config.json index 4477648..7712939 100644 --- a/config/config.json +++ b/config/config.json @@ -4,7 +4,7 @@ "startDate": "2024-10-17 00:00:00", "firstDate": "1900-01-01 00:00:00", "lastDate": "2024-10-17 00:00:00", - "speed": 10 , + "speed": 10, "debug": false, "menuDefaultOpen": true, "showDead": true, diff --git a/index.html b/index.html index c9ac31a..4d01fa6 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,6 @@ Lineage d3 */ - let lineage = null; let menuStatus = false; let config = null; diff --git a/js/lineage.js b/js/lineage.js index 9dab963..bee00e2 100644 --- a/js/lineage.js +++ b/js/lineage.js @@ -115,6 +115,8 @@ function Lineage() { users = d3.group(nodes, (d) => d.id); data = prepareData(data, filters); + console.log(`${data.nodes.length} nodes`); + console.log(`${data.links.length} links`); simulation = d3.forceSimulation(nodes); [canvas, simulation] = getCanvasSimulation(mode); @@ -125,6 +127,7 @@ function Lineage() { } function getCanvasSimulation(simulationMode) { + console.log('getCanvasSim'); canvas .on('mousemove', mousemoved) .call(d3.drag() @@ -218,19 +221,18 @@ function Lineage() { currentTime = advanceTime(currentTime); updateFilter(); - if (currentTime !== null && currentTime.getTime() !== oldDate.getTime()) { forceRefresh = true; } - if (forceRefresh) { data.nodes.forEach(addRemoveNode); if (mode === 'tree') { data.links.forEach(addRemoveLink); } } - - restart(); + if (forceRefresh) { + restart(); + } timeEnd('loop', config); forceRefresh = false; } @@ -391,7 +393,6 @@ function Lineage() { function restart() { updateYear(currentTime); users = d3.group(nodes, (d) => d.id); - context.save(); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); @@ -432,22 +433,31 @@ function Lineage() { } function treeTicked() { + console.time('tree'); context.clearRect(0, 0, width, height); context.save(); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); context.translate(width / 2, height / 2); + console.timeLog('tree', 'after transform'); + context.lineWidth = 1; links.forEach(drawLink); + console.timeLog('tree', 'after drawLink'); + users.forEach((user) => { context.beginPath(); - user.forEach(drawNode); + drawNode(user[0]); context.fillStyle = color(user[0].category); context.fill(); }); + console.timeLog('tree', 'after drawNodes'); + context.restore(); + console.timeLog('tree', 'after restore'); + console.timeEnd('tree'); } function timeTicked() { @@ -502,7 +512,6 @@ function Lineage() { function drawLink(d) { context.beginPath(); context.moveTo(d.source.x, d.source.y); - context.lineWidth = 1; context.strokeStyle = d.color; context.lineTo(d.target.x, d.target.y); context.stroke(); diff --git a/scripts/famgen.js b/scripts/famgen.js index 942767c..ea09f71 100644 --- a/scripts/famgen.js +++ b/scripts/famgen.js @@ -3,7 +3,7 @@ import Chance from 'chance'; const chance = new Chance(); // Constants -const TOTAL_NODES = 10; // This is the number we start with, but we'll end up with more when we add spouses/kids +const TOTAL_NODES = 2000; // This is the number we start with, but we'll end up with more when we add spouses/kids const MAX_CHILDREN = 5; // Max children per family const MIN_CHILDREN = 0; // Min children per family const GENDER_NEUTRAL_NAMES = [