From 53df3942e6960b9a6bea8abcafe6fe97bcb83bfa Mon Sep 17 00:00:00 2001 From: Ryan Ashley Date: Tue, 19 Mar 2019 10:01:28 -0400 Subject: [PATCH] modified spacing algorithim to go off of Max of textHeight, or leafDiameter. --- src/features/visualization/d3-viz.js | 2 +- .../visualization/d3-viz/setup-annotations.js | 61 ++++++++++--------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/src/features/visualization/d3-viz.js b/src/features/visualization/d3-viz.js index 0ad930c75..919fa101d 100644 --- a/src/features/visualization/d3-viz.js +++ b/src/features/visualization/d3-viz.js @@ -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; }); diff --git a/src/features/visualization/d3-viz/setup-annotations.js b/src/features/visualization/d3-viz/setup-annotations.js index 58b47536d..61f734bfd 100644 --- a/src/features/visualization/d3-viz/setup-annotations.js +++ b/src/features/visualization/d3-viz/setup-annotations.js @@ -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); @@ -30,12 +33,12 @@ 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);; @@ -43,15 +46,15 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{ .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") @@ -61,12 +64,12 @@ 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);; @@ -74,15 +77,15 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{ .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") @@ -92,12 +95,12 @@ 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);; @@ -105,15 +108,15 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{ .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") @@ -123,12 +126,12 @@ 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);; @@ -136,15 +139,15 @@ const setupAnnotations = ({packedData, annotationRoot, colorMap}) =>{ .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") @@ -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; }