tweaks: Id now alphabetical strings rather than numbers
This commit is contained in:
parent
65b670c9d7
commit
b40727c9df
|
@ -1,6 +1,6 @@
|
|||
/* Imports*/
|
||||
import React from "react";
|
||||
import { toLocale, truncateValueForDisplay } from "../lib/utils.js"
|
||||
import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js"
|
||||
|
||||
/* Utilities */
|
||||
let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
|
||||
|
@ -8,9 +8,9 @@ let formatLargeOrSmall = num => {
|
|||
if(num > 1){
|
||||
return toLocale(truncateValueForDisplay(num))
|
||||
}else if(num > 0){
|
||||
return num.toFixed(-Math.floor(Math.log(num)/Math.log(10)));
|
||||
return num.toFixed(-Math.floor(Math.log(num)/Math.log(10))+1);
|
||||
}else if(num > -1){
|
||||
return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10)));
|
||||
return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10))+1);
|
||||
}else{
|
||||
return toLocale(num)//return "~0"
|
||||
|
||||
|
@ -99,7 +99,7 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem
|
|||
} else {
|
||||
let nodes = orderedList.map(i => listOfElements[i])
|
||||
let distances = findDistancesForAllElements({nodes, links})
|
||||
let rows = nodes.map((element, i) => ({id: element.id, name: element.name, distances: distances[i]}))
|
||||
let rows = nodes.map((element, i) => ({id: numToAlphabeticalString(element.id), name: element.name, distances: distances[i]}))
|
||||
console.log("rows@CreateTableWithDistances")
|
||||
console.log(rows)
|
||||
return(
|
||||
|
|
|
@ -1,34 +1,34 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import * as d3 from 'd3';
|
||||
import { toLocale, truncateValueForDisplay } from "../lib/utils.js"
|
||||
import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js"
|
||||
|
||||
let getlength = (number) => number.toString().length;
|
||||
|
||||
export function removeOldSvg(){
|
||||
export function removeOldSvg() {
|
||||
d3.select("#graph").select("svg").remove();
|
||||
}
|
||||
|
||||
function drawGraphInner({nodes, links}){
|
||||
|
||||
function drawGraphInner({ nodes, links }) {
|
||||
|
||||
// List of node ids for convenience
|
||||
var nodeids = nodes.map(node => node.id)
|
||||
var positionById = {}
|
||||
nodeids.forEach((nodeid, i) => positionById[nodeid]=i)
|
||||
nodeids.forEach((nodeid, i) => positionById[nodeid] = i)
|
||||
console.log("NodeIds/positionById")
|
||||
console.log(nodeids)
|
||||
console.log(positionById)
|
||||
|
||||
|
||||
// Calculate the dimensions
|
||||
let margin = {top: 0, right: 30, bottom: 20, left: 30};
|
||||
let margin = { top: 0, right: 30, bottom: 20, left: 30 };
|
||||
let width = 900 - margin.left - margin.right;
|
||||
var x = d3.scalePoint()
|
||||
.range([0, width])
|
||||
.domain(nodeids)
|
||||
|
||||
let heights = links.map(link => {
|
||||
let start = x(positionById[link.source])
|
||||
let start = x(positionById[link.source])
|
||||
let end = x(positionById[link.target])
|
||||
return Math.abs(start-end)/2+70 // Magic constant.
|
||||
return Math.abs(start - end) / 2 + 70 // Magic constant.
|
||||
})
|
||||
console.log(heights)
|
||||
let maxheight = Math.max(...heights)
|
||||
|
@ -44,32 +44,32 @@ function drawGraphInner({nodes, links}){
|
|||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
|
||||
// A linear scale to position the nodes on the X axis
|
||||
|
||||
|
||||
|
||||
// Add the circle for the nodes
|
||||
svg
|
||||
.selectAll("mynodes")
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", function(d){ return(x(d.id))})
|
||||
.attr("cy", height-30)
|
||||
.attr("cx", function (d) { return (x(d.id)) })
|
||||
.attr("cy", height - 30)
|
||||
.attr("r", 8)
|
||||
.style("fill", "#69b3a2")
|
||||
|
||||
|
||||
// And give them a label
|
||||
svg
|
||||
.selectAll("mylabels")
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", function(d){ return(x(d.id))})
|
||||
.attr("y", height-10)
|
||||
.text(function(d){ return(d.id)})
|
||||
.attr("x", function (d) { return (x(d.id)) })
|
||||
.attr("y", height - 10)
|
||||
.text(function (d) { return numToAlphabeticalString(d.id) })
|
||||
.style("text-anchor", "middle")
|
||||
|
||||
|
||||
// Add the links
|
||||
svg
|
||||
.selectAll('mylinks')
|
||||
|
@ -77,58 +77,58 @@ function drawGraphInner({nodes, links}){
|
|||
.enter()
|
||||
.append('path')
|
||||
.attr('d', function (d) {
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return ['M',
|
||||
start,
|
||||
height-30,
|
||||
// the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
|
||||
'A',
|
||||
// This means we're gonna build an elliptical arc
|
||||
(start - end)/2, ',',
|
||||
// Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
|
||||
(start - end)/2, 0, 0, ',',
|
||||
start < end ? 1 : 0, end, ',', height-30]
|
||||
// We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
|
||||
.join(' ');
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return ['M',
|
||||
start,
|
||||
height - 30,
|
||||
// the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
|
||||
'A',
|
||||
// This means we're gonna build an elliptical arc
|
||||
(start - end) / 2, ',',
|
||||
// Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
|
||||
(start - end) / 2, 0, 0, ',',
|
||||
start < end ? 1 : 0, end, ',', height - 30]
|
||||
// We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
|
||||
.join(' ');
|
||||
})
|
||||
.style("fill", "none")
|
||||
.attr("stroke", "black")
|
||||
|
||||
|
||||
// labels for links
|
||||
svg
|
||||
.selectAll('mylinks')
|
||||
.data(links)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", function(d){
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return start + (end-start)/2 //-4*getlength(d.distance)
|
||||
.attr("x", function (d) {
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return start + (end - start) / 2 //-4*getlength(d.distance)
|
||||
})
|
||||
.attr("y", function(d){
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return height-32-(Math.abs(start-end)/2)//height-30
|
||||
.attr("y", function (d) {
|
||||
let start = x(d.source)
|
||||
// X position of start node on the X axis
|
||||
let end = x(d.target)
|
||||
// X position of end node
|
||||
return height - 32 - (Math.abs(start - end) / 2)//height-30
|
||||
})
|
||||
.text(function(d){
|
||||
.text(function (d) {
|
||||
return Number(d.distance)
|
||||
return(truncateValueForDisplay(Number(d.distance)))
|
||||
return (truncateValueForDisplay(Number(d.distance)))
|
||||
//return(Number(d.distance).toPrecision(2).toString())
|
||||
})
|
||||
.style("text-anchor", "middle")
|
||||
}
|
||||
|
||||
export function DrawGraph({isListOrdered, orderedList, listOfElements, links}) {
|
||||
if(isListOrdered){
|
||||
export function DrawGraph({ isListOrdered, orderedList, listOfElements, links }) {
|
||||
if (isListOrdered) {
|
||||
let nodes = orderedList.map(i => listOfElements[i])
|
||||
drawGraphInner({ nodes, links});
|
||||
drawGraphInner({ nodes, links });
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
|
|
|
@ -20,12 +20,12 @@ export const _transformSliderValueToPracticalValue = value => truncateValueForDi
|
|||
|
||||
export function numToAlphabeticalString(num){
|
||||
// https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487
|
||||
num=num+1
|
||||
var s = '', t;
|
||||
|
||||
while (num > 0) {
|
||||
t = (num - 1) % 26;
|
||||
s = String.fromCharCode(65 + t) + s;
|
||||
num = (num - t)/26 | 0;
|
||||
}
|
||||
return s || undefined;
|
||||
return `#${s}` || undefined;
|
||||
}
|
||||
|
|
|
@ -221,9 +221,9 @@ export default function Home({ listOfElementsDefault }) {
|
|||
}
|
||||
|
||||
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
|
||||
if (sliderValue < 1) {
|
||||
// sliderValue = -sliderValue;
|
||||
// [element1, element2] = [element2, element1]
|
||||
if (sliderValue < 1 && sliderValue > 0) {
|
||||
sliderValue = 1/sliderValue;
|
||||
[element1, element2] = [element2, element1]
|
||||
}
|
||||
console.log(`posList@nextStepSlider:`)
|
||||
console.log(posList)
|
||||
|
|
Loading…
Reference in New Issue
Block a user