Skip to content
This repository has been archived by the owner on Jan 23, 2023. It is now read-only.

Commit

Permalink
modified spacing algorithim to go off of Max of textHeight, or leafDi…
Browse files Browse the repository at this point in the history 
…ameter.
  • Loading branch information
@rashley-iqt
rashley-iqt committed Mar 19, 2019
1 parent 1b805ae commit 53df394
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/features/visualization/d3-viz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ function d3Viz(rootNode) {
pack.padding((d) => {
let pad = padding * d.height;
if(d.height > 1){
pad = padding * ((d.height + measureText(d.data.fieldValue)[0]));
pad = padding * ((d.height + measureText(d.data.fieldValue)[0])*0.70);
}
return pad;
});
Expand Down
61 changes: 32 additions & 29 deletions src/features/visualization/d3-viz/setup-annotations.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import datumKey from "./datum-key";
import className from "./class-name";
import { measureText } from "./text-utils"

const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
const data = packedData.descendants().filter(d => d.depth > 0 && d.height > 0);
const firstLeaf = packedData.descendants().filter(d => d.height === 0)[0];
const leafRadius = firstLeaf.r || 0;
const leafDiameter = 2*(firstLeaf.r || 0);
const textHeight = measureText(data.length > 0 ? data[0].fieldValue : "")[1];
const offsetIncrement = Math.max(leafDiameter, textHeight);
const annotations = annotationRoot
.selectAll(`g.${className("annotation")}`)
.data(data, datumKey);
Expand All @@ -30,28 +33,28 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
.merge(newTitles);

mergedTitles
.attr('x', (d) => ((d.r + 2*leafRadius) * Math.cos(titleAngle)) + (9*leafRadius))
.attr('y', (d) => ((d.r + 2*leafRadius) * Math.sin(titleAngle)))
.attr('x', (d) => ((d.r + 2*offsetIncrement) * Math.cos(titleAngle)) + (4*offsetIncrement))
.attr('y', (d) => ((d.r + 2*offsetIncrement) * Math.sin(titleAngle)))
.text((d) => d.data.fieldValue);

//totals
const totalAngleOffset = 2.5;
const totalAngleOffset = 2;
const newTotalContainer = annotationsEnter
.append('g')
.classed(className("total-container"), true);;
const newCircles = newTotalContainer
.append('g')
.classed(className("leafNode"), true)
.append('circle')
.attr('r', leafRadius)
.attr('r', offsetIncrement)

annotations
.select(`g.${className("total-container")}`)
.select(`g.${className("leafNode")}`)
.select('circle')
.merge(newCircles)
.attr('cx', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('cy', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))));
.attr('cx', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.attr('cy', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))));

const newTotalText = newTotalContainer
.append("text")
Expand All @@ -61,28 +64,28 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
.select(`g.${className("total-container")}`)
.select('text')
.merge(newTotalText)
.attr('x', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))) + (2*leafRadius))
.attr('y', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('x', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))) + (2*offsetIncrement))
.attr('y', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + totalAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.text((d) => !isNaN(d.value) ? ": " + d.value : ": 0");

//added nodes
const addedAngleOffset = 4.5;
const addedAngleOffset = 4;
const newAddedContainer = annotationsEnter
.append('g')
.classed(className("added-container"), true);;
const newPluses = newAddedContainer
.append('g')
.classed(className("isAdded-fixed"), true)
.append('circle')
.attr('r', leafRadius)
.attr('r', offsetIncrement)

annotations
.select(`g.${className("added-container")}`)
.select(`g.${className("isAdded-fixed")}`)
.select('circle')
.merge(newPluses)
.attr('cx', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('cy', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))));
.attr('cx', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.attr('cy', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))));

const newAddedText = newAddedContainer
.append("text")
Expand All @@ -92,28 +95,28 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
.select(`g.${className("added-container")}`)
.select('text')
.merge(newAddedText)
.attr('x', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))) + (2*leafRadius))
.attr('y', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('x', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))) + (2*offsetIncrement))
.attr('y', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + addedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.text((d) => !isNaN(d.data.CRVIZ["_addedCount"]) ? ": " + d.data.CRVIZ["_addedCount"] : ": 0");

//changed nodes
const changedAngleOffset = 6.5;
const changedAngleOffset = 6;
const newChangedContainer = annotationsEnter
.append('g')
.classed(className("changed-container"), true);;
const newDeltas = newChangedContainer
.append('g')
.classed(className("isChanged-fixed"), true)
.append('circle')
.attr('r', leafRadius)
.attr('r', offsetIncrement)

annotations
.select(`g.${className("changed-container")}`)
.select(`g.${className("isChanged-fixed")}`)
.select('circle')
.merge(newDeltas)
.attr('cx', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('cy', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))));
.attr('cx', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.attr('cy', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))));

const newChangedText = newChangedContainer
.append("text")
Expand All @@ -123,28 +126,28 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
.select(`g.${className("changed-container")}`)
.select('text')
.merge(newChangedText)
.attr('x', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))) + (2*leafRadius))
.attr('y', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('x', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))) + (2*offsetIncrement))
.attr('y', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + changedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.text((d) => !isNaN(d.data.CRVIZ["_changedCount"]) ? ": " + d.data.CRVIZ["_changedCount"] : ": 0");

//removed nodes
const removedAngleOffset = 8.5;
const removedAngleOffset = 8;
const newRemovedContainer = annotationsEnter
.append('g')
.classed(className("removed-container"), true);;
const newMinuses = newRemovedContainer
.append('g')
.classed(className("isRemoved-fixed"), true)
.append('circle')
.attr('r', leafRadius)
.attr('r', offsetIncrement)

annotations
.select(`g.${className("removed-container")}`)
.select(`g.${className("isRemoved-fixed")}`)
.select('circle')
.merge(newMinuses)
.attr('cx', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('cy', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))));
.attr('cx', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.attr('cy', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))));

const newRemovedText = newRemovedContainer
.append("text")
Expand All @@ -154,16 +157,16 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{
.select(`g.${className("removed-container")}`)
.select('text')
.merge(newRemovedText)
.attr('x', (d) => ((d.r + 2*leafRadius) * Math.cos(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))) + (2*leafRadius))
.attr('y', (d) => ((d.r + 2*leafRadius) * Math.sin(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, leafRadius))))
.attr('x', (d) => ((d.r + 2*offsetIncrement) * Math.cos(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))) + (2*offsetIncrement))
.attr('y', (d) => ((d.r + 2*offsetIncrement) * Math.sin(baseAngle + removedAngleOffset*getAngleOfLeafNodeDiameter(d.r, offsetIncrement))))
.text((d) => !isNaN(d.data.CRVIZ["_removedCount"]) ? ": " + d.data.CRVIZ["_removedCount"] : ": 0");

return annotations.merge(annotationsEnter);
}

const getAngleOfLeafNodeDiameter = (radius, leafRadius) => {
const getAngleOfLeafNodeDiameter = (radius, offsetIncrement) => {
const c = 2*radius*Math.PI;
const ratio = (2*leafRadius)/c;
const ratio = (2*offsetIncrement)/c;
return ratio*2*Math.PI;
}

Expand Down

0 comments on commit 53df394

Please sign in to comment.