From df5d4fdf6903f3920b9c973e6931ecdbfa663d00 Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 11:52:44 -0700 Subject: [PATCH 1/8] get D3 version 4 to render --- .../v3/personality-chart-renderer.js | 270 +++++------------ .../v4/personality-chart-renderer.js | 281 +++++------------- src/widget.js | 186 ++++++++++-- 3 files changed, 316 insertions(+), 421 deletions(-) diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index 4a9a73d..980f4e0 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -52,6 +52,8 @@ function renderChart(widget) { function twoArcs(g) { g.each(function(d) { g = d3.select(this); + widget.createPaths(g, d); + var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; var score = widget.getScore(d), @@ -78,101 +80,6 @@ function renderChart(widget) { right_pad = 0; } - var arc1_extend = (Math.abs(score) * d.dx - right_pad) > 0 ? (Math.abs(score) * d.dx - right_pad) : 0; - //Regular renders - var arc1 = d3.svg.arc() - .startAngle(function(d) { - return d.x; - }) //x:startangle, - .endAngle(function(d) { - return d.x + arc1_extend; - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y; - }) - .outerRadius(function(d) { - return d.y + d.dy; - }); - - var arc2 = d3.svg.arc() - .startAngle(function(d) { - return d.x + arc1_extend; - }) //x:startangle, - .endAngle(function(d) { - return d.x + Math.abs(score2) * d.dx - right_pad; - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y; - }) - .outerRadius(function(d) { - return d.y + d.dy; - }); - - //used for label path - var arc_for_label, arc_for_label_number; - var arc_label_radius, arc_label_number_radius; - if (d.depth === 1 && visutil.isLocatedBottom(d)) { - arc_label_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 6; - arc_label_number_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 8; - } else { - arc_label_radius = sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) * 5 / 12; - arc_label_number_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 7; - } - - var bottom = visutil.isLocatedBottom(d); - if (bottom) { - //special reversed label for bottom data - arc_for_label = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_radius); - arc_for_label_number = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_number_radius); - } else { - - arc_for_label = d3SvgSingleArc() - .startAngle(function(d) { - return d.x; - }) - .endAngle(function(d) { - return d.x + d.dx - right_pad; - }) - .radius(function(d) { - return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) * 3 / 5; - }); - - arc_for_label_number = d3SvgSingleArc() - .startAngle(function(d) { - return d.x; - }) - .endAngle(function(d) { - return d.x + d.dx - right_pad; - }) - .radius(function(d) { - return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) / 5; - }); - } - - d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx; - var arc1color; - var outerRingColor, innerRingLightColor, innerRingDarkColor; - - if (d.coloridx === 'personality'){ - innerRingDarkColor = widget.COLOR_PALLETTE.traits_dark; - innerRingLightColor = widget.COLOR_PALLETTE.traits_light; - outerRingColor = widget.COLOR_PALLETTE.facet; - } - - if (d.coloridx === 'needs') { - innerRingDarkColor = widget.COLOR_PALLETTE.needs_dark; - innerRingLightColor = widget.COLOR_PALLETTE.needs_light; - outerRingColor = widget.COLOR_PALLETTE.need; - } - if (d.coloridx === 'values') { - innerRingDarkColor = widget.COLOR_PALLETTE.values_dark; - innerRingLightColor = widget.COLOR_PALLETTE.values_light; - outerRingColor = widget.COLOR_PALLETTE.value; - } - - arc1color = d.depth < 2 ? d3.color(innerRingLightColor) : d3.color(innerRingDarkColor); - var strokecolor = arc1color; - //if (!d.children && d.id !== 'srasrt' && d.id !== 'srclo' && d.id !== 'srdom') { if (!d.children) { var bar_length_factor = 10 / (d.depth - 2); @@ -199,15 +106,7 @@ function renderChart(widget) { .innerRadius(inner_r) .outerRadius(out_r); // Draw leaf arcs - if (!widget._childElements.paths[widget.getUniqueId(d, 'bar')]) { - widget._childElements.paths[widget.getUniqueId(d, 'bar')] = g.append('path') - .attr('class', '_bar') - .style('stroke', '#EEE') - .style('fill', function() { - return d3.color(outerRingColor); - }); - } - widget._childElements.paths[widget.getUniqueId(d, 'bar')] + widget._childElements.parts[widget.getUniqueId(d, 'bar')] .attr('d', _bar); //add label; @@ -232,106 +131,93 @@ function renderChart(widget) { lable_size = max_label_size; } - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] = g.append('text') - .attr('class', 'sector_leaf_text'); - } - widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] + widget._childElements.parts[widget.getUniqueId(d, 'sector_leaf_text')] .attr('dy', dy_init) .attr('font-size', lable_size) .attr('text-anchor', lbl_anchor) .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x) + ',' + (-(out_r + 5) * Math.cos(d.x)) + ') ' + 'rotate(' + rotate + ')'); } else { - //non-bar/non-leaf sector - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc1')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc1')] = g.append('path') - .attr('class', 'arc1') - .style('stroke', strokecolor) // was: arc1color - .style('fill', arc1color); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc1')] + var arc1_extend = (Math.abs(score) * d.dx - right_pad) > 0 ? (Math.abs(score) * d.dx - right_pad) : 0; + //Regular renders + var arc1 = d3.svg.arc() + .startAngle(function(d) { + return d.x; + }) //x:startangle, + .endAngle(function(d) { + return d.x + arc1_extend; + }) //dx: endangle, + .innerRadius(function(d) { + return sector_bottom_pad + d.y; + }) + .outerRadius(function(d) { + return d.y + d.dy; + }); + widget._childElements.parts[widget.getUniqueId(d, 'arc1')] .attr('d', arc1); - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc2')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc2')] = g.append('path') - .attr('class', 'arc2') - .style('stroke', strokecolor) // was: arc1color - .style('fill', arc1color) - .style('fill-opacity', 0.15); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc2')] + var arc2 = d3.svg.arc() + .startAngle(function(d) { + return d.x + arc1_extend; + }) //x:startangle, + .endAngle(function(d) { + return d.x + Math.abs(score2) * d.dx - right_pad; + }) //dx: endangle, + .innerRadius(function(d) { + return sector_bottom_pad + d.y; + }) + .outerRadius(function(d) { + return d.y + d.dy; + }); + widget._childElements.parts[widget.getUniqueId(d, 'arc2')] .attr('d', arc2); - //draw label: - //path used for label - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] = g.append('path') - .attr('class', 'arc_for_label') - .attr('id', function(d) { - return widget.getUniqueId(d, 'arc_for_label'); - }) - .style('stroke-opacity', 0) - .style('fill-opacity', 0); + //used for label path + var bottom = visutil.isLocatedBottom(d); + var arc_for_label, arc_for_label_number; + var arc_label_radius, arc_label_number_radius; + if (d.depth === 1 && bottom) { + arc_label_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 6; + arc_label_number_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 8; + } else { + arc_label_radius = sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) * 5 / 12; + arc_label_number_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 7; } - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] - .attr('d', arc_for_label); + if (bottom) { + //special reversed label for bottom data + arc_for_label = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_radius); + arc_for_label_number = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_number_radius); + } else { + arc_for_label = d3SvgSingleArc() + .startAngle(function(d) { + return d.x; + }) + .endAngle(function(d) { + return d.x + d.dx - right_pad; + }) + .radius(function(d) { + return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) * 3 / 5; + }); - //add label - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_path')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_label_path')] = g.append('text') - .attr('class', 'sector_label') - .attr('visibility', function(d) { - return d.depth === 1 ? 'visible' : null; + arc_for_label_number = d3SvgSingleArc() + .startAngle(function(d) { + return d.x; }) - .attr('class', 'sector_nonleaf_text') - .append('textPath') - .attr('class', 'sector_label_path') - .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length - .attr('font-size', function(d) { - return 30 / Math.sqrt(d.depth + 1); + .endAngle(function(d) { + return d.x + d.dx - right_pad; }) - .attr('xlink:href', function(d) { - return '#' + widget.getUniqueId(d, 'arc_for_label'); + .radius(function(d) { + return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) / 5; }); } + widget._childElements.parts[widget.getUniqueId(d, 'arc_for_label')] + .attr('d', arc_for_label); + //draw label number //path used for label number if (d.depth > 1) { - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] = g.append('path') - .attr('class', 'arc_for_label_number') - // NOTE HB: adding widget.id so we to avoid name clashing - .attr('id', function(d) { - return widget.getUniqueId(d, 'arc_for_label_number'); - }) - .style('stroke-opacity', 0) - .style('fill-opacity', 0); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] + widget._childElements.parts[widget.getUniqueId(d, 'arc_for_label_number')] .attr('d', arc_for_label_number); - - //add label - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number_path')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number_path')] = g.append('text') - .attr('class', 'sector_label_number ') - .attr('visibility', function(d) { - return d.depth === 1 ? 'visible' : null; - }) - //.attr('font-family','sans-serif') - .attr('class', 'sector_nonleaf_text') - //.attr('fill', d3.rgb(arc1color).darker(2)) - .append('textPath') - .attr('class', 'sector_label_number_path') - .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length - .attr('font-size', function() { - return 10; - }) - // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing - .attr('xlink:href', function(d) { - return '#' + widget.getUniqueId(d, 'arc_for_label_number'); - }); - } } } }); @@ -351,6 +237,12 @@ function renderChart(widget) { .attr('transform', 'translate(' + (width / 2) + ',' + height / 2 + ')') .append('g'); + var profile = { + children: tree.children.filter(function (child) { + return widget.exclude.indexOf(child.id) === -1; + }) + }; + var partition = d3.layout.partition() .sort(null) .size([2 * Math.PI, radius]) @@ -359,16 +251,6 @@ function renderChart(widget) { return d.size; }); - var profile = { - children: tree.children - }; - - // exclude specified sectors - var exclude = widget.exclude; - profile.children = profile.children.filter(function (child) { - return exclude.indexOf(child.id) === -1; - }); - var g = widget.vis.data([profile]).selectAll('g') .data(partition.nodes) .enter().append('g') diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index 6fa6515..73ce8bf 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -53,6 +53,7 @@ function renderChart(widget) { function twoArcs(g) { g.each(function(d) { g = d3.select(this); + widget.createPaths(g, d); var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; @@ -80,114 +81,20 @@ function renderChart(widget) { right_pad = 0; } - var arc1_extend = Math.max(Math.abs(score) * (d.x1 - d.x0) - right_pad, 0); - //Regular renders - var arc1 = d3.arc() - .startAngle(function(d) { - return d.x0; - }) //x:startangle, - .endAngle(function(d) { - return d.x0 + arc1_extend; - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y0; - }) - .outerRadius(function(d) { - return d.y1; - }); - - var arc2 = d3.arc() - .startAngle(function(d) { - return d.x0 + arc1_extend; - }) //x:startangle, - .endAngle(function(d) { - return d.x0 + Math.abs(score2) * (d.x1 - d.x0) - right_pad; - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y0; - }) - .outerRadius(function(d) { - return d.y1; - }); - - //used for label path - var arc_for_label, arc_for_label_number; - var arc_label_radius, arc_label_number_radius; - if (d.depth === 1 && visutil.isLocatedBottom(d)) { - arc_label_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 6; - arc_label_number_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 8; - } else { - arc_label_radius = sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) * 5 / 12; - arc_label_number_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 7; - } - - var bottom = visutil.isLocatedBottom(d); - if (bottom) { - //special reversed label for bottom data - arc_for_label = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_radius); - arc_for_label_number = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_number_radius); - } else { - - arc_for_label = d3SvgSingleArc() - .startAngle(function(d) { - return d.x0; - }) - .endAngle(function(d) { - return d.x1 - right_pad; - }) - .radius(function(d) { - return d.depth === 1 ? d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 3 : sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) * 3 / 5; - }); - - arc_for_label_number = d3SvgSingleArc() - .startAngle(function(d) { - return d.x0; - }) - .endAngle(function(d) { - return d.x1 - right_pad; - }) - .radius(function(d) { - return d.depth === 1 ? d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 3 : sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) / 5; - }); - } - - d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx; - var arc1color; - var outerRingColor, innerRingLightColor, innerRingDarkColor; - - if (d.coloridx === 'personality'){ - innerRingDarkColor = widget.COLOR_PALLETTE.traits_dark; - innerRingLightColor = widget.COLOR_PALLETTE.traits_light; - outerRingColor = widget.COLOR_PALLETTE.facet; - } - - if (d.coloridx === 'needs') { - innerRingDarkColor = widget.COLOR_PALLETTE.needs_dark; - innerRingLightColor = widget.COLOR_PALLETTE.needs_light; - outerRingColor = widget.COLOR_PALLETTE.need; - } - if (d.coloridx === 'values') { - innerRingDarkColor = widget.COLOR_PALLETTE.values_dark; - innerRingLightColor = widget.COLOR_PALLETTE.values_light; - outerRingColor = widget.COLOR_PALLETTE.value; - } - - arc1color = d.depth < 2 ? d3.color(innerRingLightColor) : d3.color(innerRingDarkColor); - var strokecolor = arc1color; - - //if (!d.children && d.id !== 'srasrt' && d.id !== 'srclo' && d.id !== 'srdom') { if (!d.children) { - score = d.score; var bar_length_factor = 10 / (d.depth - 2); //different bar_length factors if (d.parent) { if (d.parent.parent) { - if (d.parent.parent.id === 'needs' || d.parent.parent.id === 'values') { + if (d.parent.parent.data.id === 'needs' || d.parent.parent.data.id === 'values') { bar_length_factor = 1; } - if (d.parent.parent.parent) - if (d.parent.parent.parent.id === 'personality') bar_length_factor = 1; + if (d.parent.parent.parent) { + if (d.parent.parent.parent.data.id === 'personality') { + bar_length_factor = 1; + } + } } else { console.debug(d.name + ': Parent is null!'); } @@ -202,15 +109,7 @@ function renderChart(widget) { .innerRadius(inner_r) .outerRadius(out_r); // Draw leaf arcs - if (!widget._childElements.paths[widget.getUniqueId(d, 'bar')]) { - widget._childElements.paths[widget.getUniqueId(d, 'bar')] = g.append('path') - .attr('class', '_bar') - .style('stroke', '#EEE') - .style('fill', function() { - return d3.color(outerRingColor); - }); - } - widget._childElements.paths[widget.getUniqueId(d, 'bar')] + widget._childElements.parts[widget.getUniqueId(d, 'bar')] .attr('d', _bar); //add label; @@ -235,105 +134,90 @@ function renderChart(widget) { lable_size = max_label_size; } - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] = g.append('text') - .attr('class', 'sector_leaf_text'); - } - widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] + widget._childElements.parts[widget.getUniqueId(d, 'sector_leaf_text')] .attr('dy', dy_init) .attr('font-size', lable_size) .attr('text-anchor', lbl_anchor) .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x0) + ',' + (-(out_r + 5) * Math.cos(d.x0)) + ') ' + 'rotate(' + rotate + ')'); - } else { - //non-bar/non-leaf sector - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc1')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc1')] = g.append('path') - .attr('class', 'arc1') - .style('stroke', strokecolor) // was: arc1color - .style('fill', arc1color); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc1')] + var arc1_extend = Math.max(Math.abs(score) * (d.x1 - d.x0) - right_pad, 0); + //Regular renders + var arc1 = d3.arc() + .startAngle(function(d) { + return d.x0; + }) //x:startangle, + .endAngle(function(d) { + return d.x0 + arc1_extend; + }) //dx: endangle, + .innerRadius(function(d) { + return sector_bottom_pad + d.y0; + }) + .outerRadius(function(d) { + return d.y1; + }); + + widget._childElements.parts[widget.getUniqueId(d, 'arc1')] .attr('d', arc1); - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc2')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc2')] = g.append('path') - .attr('class', 'arc2') - .style('stroke', strokecolor) // was: arc1color - .style('fill', arc1color) - .style('fill-opacity', 0.15); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc2')] + var arc2 = d3.arc() + .startAngle(function(d) { + return d.x0 + arc1_extend; + }) //x:startangle, + .endAngle(function(d) { + return d.x0 + Math.abs(score2) * (d.x1 - d.x0) - right_pad; + }) //dx: endangle, + .innerRadius(function(d) { + return sector_bottom_pad + d.y0; + }) + .outerRadius(function(d) { + return d.y1; + }); + widget._childElements.parts[widget.getUniqueId(d, 'arc2')] .attr('d', arc2); - //draw label: - //path used for label - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] = g.append('path') - .attr('class', 'arc_for_label') - // NOTE HB: adding widget.id so we to avoid name clashing - .attr('id', function(d) { - return widget.id + '_' + d.id + '.arc_for_label'; - }) - .style('stroke-opacity', 0) - .style('fill-opacity', 0); + var bottom = visutil.isLocatedBottom(d); + var arc_for_label, arc_for_label_number; + var arc_label_radius, arc_label_number_radius; + if (d.depth === 1 && bottom) { + arc_label_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 6; + arc_label_number_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 8; + } else { + arc_label_radius = sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) * 5 / 12; + arc_label_number_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 7; } - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] - .attr('d', arc_for_label); - //add label - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_label')] = g.append('text') - .attr('class', 'sector_label') - .attr('visibility', function(d) { - return d.depth === 1 ? 'visible' : null; + if (bottom) { + //special reversed label for bottom data + arc_for_label = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_radius); + arc_for_label_number = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_number_radius); + } else { + arc_for_label = d3SvgSingleArc() + .startAngle(function(d) { + return d.x0; }) - .attr('class', 'sector_nonleaf_text') - .append('textPath') - .attr('class', 'sector_label_path') - .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length - .attr('font-size', function(d) { - return 30 / Math.sqrt(d.depth + 1); + .endAngle(function(d) { + return d.x1 - right_pad; }) - .attr('xlink:href', function(d) { - return '#' + widget.id + '_' + d.id + '.arc_for_label'; + .radius(function(d) { + return d.depth === 1 ? d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 3 : sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) * 3 / 5; }); - } - //draw label number - //path used for label number + arc_for_label_number = d3SvgSingleArc() + .startAngle(function(d) { + return d.x0; + }) + .endAngle(function(d) { + return d.x1 - right_pad; + }) + .radius(function(d) { + return d.depth === 1 ? d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 3 : sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) / 5; + }); + } + widget._childElements.parts[widget.getUniqueId(d, 'arc_for_label')] + .attr('d', arc_for_label); if (d.depth > 1) { - if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]) { - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] = g.append('path') - .attr('class', 'arc_for_label_number') - .attr('id', function(d) { - return widget.id + '_' + d.id + '.arc_for_label_number'; - }) - .style('stroke-opacity', 0) - .style('fill-opacity', 0); - } - widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] + widget._childElements.parts[widget.getUniqueId(d, 'arc_for_label_number')] .attr('d', arc_for_label_number); - - //add label - if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number')]) { - widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number')] = g.append('text') - .attr('class', 'sector_label_number ') - .attr('visibility', function(d) { - return d.depth === 1 ? 'visible' : null; - }) - .attr('class', 'sector_nonleaf_text') - .append('textPath') - .attr('class', 'sector_label_number_path') - .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length - .attr('font-size', function() { - return 10; - }) - // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing - .attr('xlink:href', function(d) { - return '#' + widget.id + '_' + d.id + '.arc_for_label_number'; - }); - } } } }); @@ -354,21 +238,16 @@ function renderChart(widget) { .append('g'); var profile = { - children: tree.children + children: tree.children.filter(function (child) { + return widget.exclude.indexOf(child.id) === -1; + }) }; - // exclude specified sectors - var exclude = widget.exclude; - profile.children = profile.children.filter(function (child) { - return exclude.indexOf(child.id) === -1; - }); - - var root = d3.hierarchy([profile]) + var root = d3.hierarchy(profile) .sum(function(d) { if (!d.hasOwnProperty('size') && !d.hasOwnProperty('children')) return 1; return d.size; - }) - .sort(null); + }); var partition = d3.partition() .size([2 * Math.PI, radius]); diff --git a/src/widget.js b/src/widget.js index 11257b5..0712d5a 100644 --- a/src/widget.js +++ b/src/widget.js @@ -17,6 +17,7 @@ 'use strict'; const colors = require('./utilities/colors'); +const visutil = require('./d3-renderers/visutil'); class SunburstWidget { @@ -41,8 +42,7 @@ class SunburstWidget { image: null, pattern: null, circle: null, - texts: {}, - paths: {} + parts: {} }; } @@ -124,36 +124,36 @@ class SunburstWidget { var self = this; tree.children.forEach(function(child) { - if (self._childElements.texts[self.getUniqueId(child, 'sector_label_path')]) { - self._childElements.texts[self.getUniqueId(child, 'sector_label_path')].text(self.getNameLabelText(child)); + if (self._childElements.parts[self.getUniqueId(child, 'sector_label_path')]) { + self._childElements.parts[self.getUniqueId(child, 'sector_label_path')].text(self.getNameLabelText(child)); } child.children.forEach(function(category) { - if (self._childElements.texts[self.getUniqueId(category, 'sector_label_path')]) { - self._childElements.texts[self.getUniqueId(category, 'sector_label_path')].text(category.name); + if (self._childElements.parts[self.getUniqueId(category, 'sector_label_path')]) { + self._childElements.parts[self.getUniqueId(category, 'sector_label_path')].text(category.name); } - if (self._childElements.texts[self.getUniqueId(category, 'sector_label_number_path')]) { - self._childElements.texts[self.getUniqueId(category, 'sector_label_number_path')].text(self.getScoreLabelText(category)); + if (self._childElements.parts[self.getUniqueId(category, 'sector_label_number_path')]) { + self._childElements.parts[self.getUniqueId(category, 'sector_label_number_path')].text(self.getScoreLabelText(category)); } category.children.forEach(function(trait) { if (trait.category === 'personality') { // personality traits - if (self._childElements.texts[self.getUniqueId(trait, 'sector_label_path')]) { - self._childElements.texts[self.getUniqueId(trait, 'sector_label_path')].text(trait.name); + if (self._childElements.parts[self.getUniqueId(trait, 'sector_label_path')]) { + self._childElements.parts[self.getUniqueId(trait, 'sector_label_path')].text(trait.name); } - if (self._childElements.texts[self.getUniqueId(trait, 'sector_label_number_path')]) { - self._childElements.texts[self.getUniqueId(trait, 'sector_label_number_path')].text(self.getScoreLabelText(trait)); + if (self._childElements.parts[self.getUniqueId(trait, 'sector_label_number_path')]) { + self._childElements.parts[self.getUniqueId(trait, 'sector_label_number_path')].text(self.getScoreLabelText(trait)); } trait.children.forEach(function(facet) { - if (self._childElements.texts[self.getUniqueId(facet, 'sector_leaf_text')]) { - self._childElements.texts[self.getUniqueId(facet, 'sector_leaf_text')].text(self.getNameLabelText(facet)); + if (self._childElements.parts[self.getUniqueId(facet, 'sector_leaf_text')]) { + self._childElements.parts[self.getUniqueId(facet, 'sector_leaf_text')].text(self.getNameLabelText(facet)); } }); } else { - if (self._childElements.texts[self.getUniqueId(trait, 'sector_leaf_text')]) { - self._childElements.texts[self.getUniqueId(trait, 'sector_leaf_text')].text(self.getNameLabelText(trait)); + if (self._childElements.parts[self.getUniqueId(trait, 'sector_leaf_text')]) { + self._childElements.parts[self.getUniqueId(trait, 'sector_leaf_text')].text(self.getNameLabelText(trait)); } } }); @@ -274,16 +274,16 @@ class SunburstWidget { getScore(d) { var score = d.score; - if (score === null) score = 1; - if (score >= 1) { - score = 0.99; - } else if (score <= -1) { - score = -0.99; - } - - //for request without any result - if (d.name === '') { + if (!d.name) { score = 0; + } else { + if (score === null) { + score = 0.99; + } else if (score >= 1) { + score = 0.99; + } else if (score <= -1) { + score = -0.99; + } } return score; @@ -315,12 +315,146 @@ class SunburstWidget { } getUniqueId(d, _class) { - var uid = this.id + '_' + d.id; + var uid = this.id + '_' + (d.data ? d.data.id : d.id); if (_class) { uid += '.' + _class; } return uid; } + + getColors(d) { + d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx; + + if (d.coloridx === 'personality') { + return { + innerRingDarkColor: this.COLOR_PALLETTE.traits_dark, + innerRingLightColor: this.COLOR_PALLETTE.traits_light, + outerRingColor: this.COLOR_PALLETTE.facet + }; + } else if (d.coloridx === 'needs') { + return { + innerRingDarkColor: this.COLOR_PALLETTE.needs_dark, + innerRingLightColor: this.COLOR_PALLETTE.needs_light, + outerRingColor: this.COLOR_PALLETTE.need + }; + } else if (d.coloridx === 'values') { + return { + innerRingDarkColor: this.COLOR_PALLETTE.values_dark, + innerRingLightColor: this.COLOR_PALLETTE.values_light, + outerRingColor: this.COLOR_PALLETTE.value + }; + } else { + return { + innerRingDarkColor: this.COLOR_PALLETTE.traits_dark, + innerRingLightColor: this.COLOR_PALLETTE.traits_light, + outerRingColor: this.COLOR_PALLETTE.facet + }; + } + } + + createPaths(g, d) { + var self = this; + var uid, innerRingDarkColor, innerRingLightColor, outerRingColor; + var colors = this.getColors(d); + var arc1color = d.depth < 2 ? this.d3.color(colors.innerRingLightColor) : this.d3.color(colors.innerRingDarkColor); + var strokecolor = arc1color; + var bottom = visutil.isLocatedBottom(d); + + if (!d.children) { + uid = this.getUniqueId(d, 'bar'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('path') + .attr('class', '_bar') + .style('stroke', '#EEE') + .style('fill', this.d3.color(colors.outerRingColor)); + } + + uid = this.getUniqueId(d, 'sector_leaf_text'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('text') + .attr('class', 'sector_leaf_text'); + } + } else { + uid = this.getUniqueId(d, 'arc1'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('path') + .attr('class', 'arc1') + .style('stroke', strokecolor) + .style('fill', arc1color); + } + + uid = this.getUniqueId(d, 'arc2'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('path') + .attr('class', 'arc2') + .style('stroke', strokecolor) + .style('fill', arc1color) + .style('fill-opacity', 0.15); + } + + uid = this.getUniqueId(d, 'arc_for_label'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('path') + .attr('class', 'arc_for_label') + .attr('id', function(d) { + return self.getUniqueId(d, 'arc_for_label'); + }) + .style('stroke-opacity', 0) + .style('fill-opacity', 0); + } + + uid = this.getUniqueId(d, 'sector_label_path'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('text') + .attr('class', 'sector_label') + .attr('visibility', function(d) { + return d.depth === 1 ? 'visible' : null; + }) + .attr('class', 'sector_nonleaf_text') + .append('textPath') + .attr('class', 'sector_label_path') + .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length + .attr('font-size', function(d) { + return 30 / Math.sqrt(d.depth + 1); + }) + .attr('xlink:href', function(d) { + return '#' + self.getUniqueId(d, 'arc_for_label'); + }); + } + + if (d.depth > 1) { + uid = this.getUniqueId(d, 'arc_for_label_number'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('path') + .attr('class', 'arc_for_label_number') + .attr('id', function(d) { + return self.getUniqueId(d, 'arc_for_label_number'); + }) + .style('stroke-opacity', 0) + .style('fill-opacity', 0); + } + + uid = this.getUniqueId(d, 'sector_label_number_path'); + if (!this._childElements.parts[uid]) { + this._childElements.parts[uid] = g.append('text') + .attr('class', 'sector_label_number ') + .attr('visibility', function(d) { + return d.depth === 1 ? 'visible' : null; + }) + .attr('class', 'sector_nonleaf_text') + .append('textPath') + .attr('class', 'sector_label_number_path') + .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length + .attr('font-size', function() { + return 10; + }) + .attr('xlink:href', function(d) { + return '#' + self.getUniqueId(d, 'arc_for_label_number'); + }); + } + } + } + } } module.exports = SunburstWidget; From 04acb44b8e56a97580749fd08fa7b5eacadb4edb Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 12:08:45 -0700 Subject: [PATCH 2/8] fix coloring --- .../v3/personality-chart-renderer.js | 3 +- .../v4/personality-chart-renderer.js | 34 +++++++++---------- src/d3-renderers/visutil.js | 4 +-- src/widget.js | 15 ++++---- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index 980f4e0..f24687f 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -52,7 +52,7 @@ function renderChart(widget) { function twoArcs(g) { g.each(function(d) { g = d3.select(this); - widget.createPaths(g, d); + widget.createParts(g, d); var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; @@ -80,7 +80,6 @@ function renderChart(widget) { right_pad = 0; } - //if (!d.children && d.id !== 'srasrt' && d.id !== 'srclo' && d.id !== 'srdom') { if (!d.children) { var bar_length_factor = 10 / (d.depth - 2); diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index 73ce8bf..ab96f0c 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -53,7 +53,7 @@ function renderChart(widget) { function twoArcs(g) { g.each(function(d) { g = d3.select(this); - widget.createPaths(g, d); + widget.createParts(g, d); var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; @@ -61,8 +61,8 @@ function renderChart(widget) { score2 = 1; //for score sentiment data. it is the score of positive+netural //special render perception sector - if (d.perc_neu !== null && (((d.score + d.perc_neu) * (d.x1 - d.x0)) < ((d.x1 - d.x0) - sector_right_pad / (3 * d.depth)))) { - score2 = d.score + d.perc_neu; + if (d.perc_neu !== null && (((d.data.score + d.perc_neu) * (d.x1 - d.x0)) < ((d.x1 - d.x0) - sector_right_pad / (3 * d.depth)))) { + score2 = d.data.score + d.perc_neu; d3.arc() .startAngle(function(d) { @@ -160,18 +160,18 @@ function renderChart(widget) { .attr('d', arc1); var arc2 = d3.arc() - .startAngle(function(d) { - return d.x0 + arc1_extend; - }) //x:startangle, - .endAngle(function(d) { - return d.x0 + Math.abs(score2) * (d.x1 - d.x0) - right_pad; - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y0; - }) - .outerRadius(function(d) { - return d.y1; - }); + .startAngle(function(d) { + return d.x0 + arc1_extend; + }) //x:startangle, + .endAngle(function(d) { + return d.x0 + Math.abs(score2) * (d.x1 - d.x0) - right_pad; + }) //dx: endangle, + .innerRadius(function(d) { + return sector_bottom_pad + d.y0; + }) + .outerRadius(function(d) { + return d.y1; + }); widget._childElements.parts[widget.getUniqueId(d, 'arc2')] .attr('d', arc2); @@ -188,8 +188,8 @@ function renderChart(widget) { if (bottom) { //special reversed label for bottom data - arc_for_label = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_radius); - arc_for_label_number = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0- Math.PI / 2, arc_label_number_radius); + arc_for_label = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_radius); + arc_for_label_number = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_number_radius); } else { arc_for_label = d3SvgSingleArc() .startAngle(function(d) { diff --git a/src/d3-renderers/visutil.js b/src/d3-renderers/visutil.js index e707b08..296579a 100644 --- a/src/d3-renderers/visutil.js +++ b/src/d3-renderers/visutil.js @@ -5,7 +5,7 @@ function expandOrFoldSector(d3, g, d, self) { if (d.children) d3.select(self).attr('opacity', 1); g.filter(function(a) { if (a.parent) - return a.parent.id === d.id; + return a.parent.id === (d.data ? d.data.id : d.id); }) .attr('visibility', 'visible'); d.expand = 1; @@ -21,7 +21,7 @@ function expandOrFoldSector(d3, g, d, self) { function hideSector(d, g) { g.filter(function(a) { if (a.parent) - return a.parent.id === d.id; + return a.parent.id === (d.data ? d.data.id : d.id); }) .attr('visibility', 'hidden') .attr('opacity', 1) diff --git a/src/widget.js b/src/widget.js index 0712d5a..d53c94a 100644 --- a/src/widget.js +++ b/src/widget.js @@ -180,12 +180,12 @@ class SunburstWidget { var curNd = d3this.node(); var text = d3this.text(); if (text && text.length > 0) { - var position = self.d3.select(this).attr('position-in-sector'); // 'inner' or 'outer' + var position = self.d3.select(this).attr('position-in-sector'); var frac = position === 'center' ? 0.5 : position === 'outer' ? 2 / 3 : 1 / 3; var sector_length = self._d3version === 'v3' ? (d.y + d.dy * frac) * d.dx : (d.y1 * frac) * (d.x1 - d.x0); - var text_length = curNd.getComputedTextLength(); //+margin; + var text_length = curNd.getComputedTextLength(); var cur_font_size = self.d3.select(this).attr('font-size'); var new_font_size = cur_font_size * sector_length / text_length; @@ -273,7 +273,7 @@ class SunburstWidget { } getScore(d) { - var score = d.score; + var score = d.data ? d.data.score : d.score; if (!d.name) { score = 0; } else { @@ -290,7 +290,8 @@ class SunburstWidget { } getScoreLabelText(d) { - return d.score === null || isNaN(d.score) ? '' : ' (' + (this.getScore(d) * 100).toFixed(0) + '%)'; + var score = d.data ? d.data.score : d.score; + return score === null || isNaN(score) ? '' : ' (' + (this.getScore(d) * 100).toFixed(0) + '%)'; } getNameLabelText(d) { @@ -323,7 +324,7 @@ class SunburstWidget { } getColors(d) { - d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx; + d.coloridx = (d.depth === 1 || d.depth === 0) ? (d.data ? d.data.id : d.id) : d.parent.coloridx; if (d.coloridx === 'personality') { return { @@ -352,9 +353,9 @@ class SunburstWidget { } } - createPaths(g, d) { + createParts(g, d) { var self = this; - var uid, innerRingDarkColor, innerRingLightColor, outerRingColor; + var uid; var colors = this.getColors(d); var arc1color = d.depth < 2 ? this.d3.color(colors.innerRingLightColor) : this.d3.color(colors.innerRingDarkColor); var strokecolor = arc1color; From e44b1ab8b2cc2daeab7a019e15eea40ad5b5d145 Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 12:22:15 -0700 Subject: [PATCH 3/8] fix issue with retrieving data from nodes --- .../v4/personality-chart-renderer.js | 2 +- src/d3-renderers/visutil.js | 11 +++++-- src/widget.js | 29 +++++++++++-------- 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index ab96f0c..1e5b7dd 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -96,7 +96,7 @@ function renderChart(widget) { } } } else { - console.debug(d.name + ': Parent is null!'); + console.debug(d.data.name + ': Parent is null!'); } } diff --git a/src/d3-renderers/visutil.js b/src/d3-renderers/visutil.js index 296579a..78e09b8 100644 --- a/src/d3-renderers/visutil.js +++ b/src/d3-renderers/visutil.js @@ -5,7 +5,7 @@ function expandOrFoldSector(d3, g, d, self) { if (d.children) d3.select(self).attr('opacity', 1); g.filter(function(a) { if (a.parent) - return a.parent.id === (d.data ? d.data.id : d.id); + return a.parent.id === getValue(d, 'id'); }) .attr('visibility', 'visible'); d.expand = 1; @@ -21,7 +21,7 @@ function expandOrFoldSector(d3, g, d, self) { function hideSector(d, g) { g.filter(function(a) { if (a.parent) - return a.parent.id === (d.data ? d.data.id : d.id); + return a.parent.id === getValue(d, 'id'); }) .attr('visibility', 'hidden') .attr('opacity', 1) @@ -47,8 +47,13 @@ function isLocatedBottom(d) { return bottom; } +function getValue(d, prop) { + return d.data ? d.data[prop] : d[prop]; +} + module.exports = { isLocatedBottom: isLocatedBottom, arc: arc, - expandOrFoldSector: expandOrFoldSector + expandOrFoldSector: expandOrFoldSector, + getValue: getValue }; diff --git a/src/widget.js b/src/widget.js index d53c94a..a179c2a 100644 --- a/src/widget.js +++ b/src/widget.js @@ -273,8 +273,9 @@ class SunburstWidget { } getScore(d) { - var score = d.data ? d.data.score : d.score; - if (!d.name) { + var score = visutil.getValue(d, 'score'); + var name = visutil.getValue(d, 'name'); + if (!name) { score = 0; } else { if (score === null) { @@ -290,25 +291,29 @@ class SunburstWidget { } getScoreLabelText(d) { - var score = d.data ? d.data.score : d.score; + var score = visutil.getValue(d, 'score'); return score === null || isNaN(score) ? '' : ' (' + (this.getScore(d) * 100).toFixed(0) + '%)'; } getNameLabelText(d) { - if (!d.name) { + var name = visutil.getValue(d, 'name'); + if (!name) { return ''; } - var label = d.name, score = this.getScore(d); - if (d.id === 'sbh_dom' || d.id === 'sbh_parent'){ - label = d.name; + var score = this.getScore(d); + var id = visutil.getValue(d, 'id'); + var label = name; + + if (id === 'sbh_dom' || id === 'sbh_parent'){ + label = name; } else if (d.category === 'values') { - label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); + label = name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); } else { - label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); + label = name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); if ((Math.round(parseFloat(score) * 100) / 100) === 0) { - label = d.name; + label = name; } } @@ -316,7 +321,7 @@ class SunburstWidget { } getUniqueId(d, _class) { - var uid = this.id + '_' + (d.data ? d.data.id : d.id); + var uid = this.id + '_' + visutil.getValue(d, 'id'); if (_class) { uid += '.' + _class; } @@ -324,7 +329,7 @@ class SunburstWidget { } getColors(d) { - d.coloridx = (d.depth === 1 || d.depth === 0) ? (d.data ? d.data.id : d.id) : d.parent.coloridx; + d.coloridx = (d.depth === 1 || d.depth === 0) ? visutil.getValue(d, 'id') : d.parent.coloridx; if (d.coloridx === 'personality') { return { From 9d6e674b1d1c61bbb6a0d8bf9bb9894b8c6281c5 Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 12:30:43 -0700 Subject: [PATCH 4/8] remove unused code --- .../v3/personality-chart-renderer.js | 27 ++----------------- .../v4/personality-chart-renderer.js | 27 ++----------------- 2 files changed, 4 insertions(+), 50 deletions(-) diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index f24687f..0fb48e2 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -55,30 +55,7 @@ function renderChart(widget) { widget.createParts(g, d); var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; - - var score = widget.getScore(d), - score2 = 1; //for score sentiment data. it is the score of positive+netural - - //special render perception sector - if (d.perc_neu !== null && ((d.score + d.perc_neu) * d.dx < d.dx - sector_right_pad / (3 * d.depth))) { - score2 = d.score + d.perc_neu; - - d3.svg.arc() - .startAngle(function(d) { - return d.x + Math.abs(score2) * d.dx; - }) //x:startangle, - .endAngle(function(d) { - return d.x + d.dx - sector_right_pad / (3 * d.depth); - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y; - }) - .outerRadius(function(d) { - return d.y + d.dy; - }); - - right_pad = 0; - } + var score = widget.getScore(d); if (!d.children) { var bar_length_factor = 10 / (d.depth - 2); @@ -159,7 +136,7 @@ function renderChart(widget) { return d.x + arc1_extend; }) //x:startangle, .endAngle(function(d) { - return d.x + Math.abs(score2) * d.dx - right_pad; + return d.x + d.dx - right_pad; }) //dx: endangle, .innerRadius(function(d) { return sector_bottom_pad + d.y; diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index 1e5b7dd..3dd4c97 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -56,30 +56,7 @@ function renderChart(widget) { widget.createParts(g, d); var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad; - - var score = widget.getScore(d), - score2 = 1; //for score sentiment data. it is the score of positive+netural - - //special render perception sector - if (d.perc_neu !== null && (((d.data.score + d.perc_neu) * (d.x1 - d.x0)) < ((d.x1 - d.x0) - sector_right_pad / (3 * d.depth)))) { - score2 = d.data.score + d.perc_neu; - - d3.arc() - .startAngle(function(d) { - return d.x0 + Math.abs(score2) * (d.x1 - d.x0); - }) //x:startangle, - .endAngle(function(d) { - return d.x1 - sector_right_pad / (3 * d.depth); - }) //dx: endangle, - .innerRadius(function(d) { - return sector_bottom_pad + d.y0; - }) - .outerRadius(function(d) { - return d.y1; - }); - - right_pad = 0; - } + var score = widget.getScore(d); if (!d.children) { var bar_length_factor = 10 / (d.depth - 2); @@ -164,7 +141,7 @@ function renderChart(widget) { return d.x0 + arc1_extend; }) //x:startangle, .endAngle(function(d) { - return d.x0 + Math.abs(score2) * (d.x1 - d.x0) - right_pad; + return d.x0 + (d.x1 - d.x0) - right_pad; }) //dx: endangle, .innerRadius(function(d) { return sector_bottom_pad + d.y0; From 86950e5906c3c6016e6fd3e76fcd3d93bee3ddfc Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 13:27:29 -0700 Subject: [PATCH 5/8] code cleanup --- src/d3-renderers/v3/personality-chart-renderer.js | 2 +- src/d3-renderers/v4/personality-chart-renderer.js | 2 +- src/d3-renderers/visutil.js | 6 +++--- src/widget.js | 5 +++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index 0fb48e2..62e5244 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -239,7 +239,7 @@ function renderChart(widget) { d.expand = 1; }) .on('click', function(d) { - visutil.expandOrFoldSector(d3, g, d, this); + visutil.expandOrFoldSector(g, d, d3.select(this)); }) .on('mouseover', function(d) { widget.showTooltip(d, this); diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index 3dd4c97..d82f5de 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -241,7 +241,7 @@ function renderChart(widget) { d.expand = 1; }) .on('click', function(d) { - visutil.expandOrFoldSector(d3, g, d, this); + visutil.expandOrFoldSector(g, d, d3.select(this)); }) .on('mouseover', function(d) { widget.showTooltip(d, this); diff --git a/src/d3-renderers/visutil.js b/src/d3-renderers/visutil.js index 78e09b8..56fe513 100644 --- a/src/d3-renderers/visutil.js +++ b/src/d3-renderers/visutil.js @@ -1,8 +1,8 @@ -function expandOrFoldSector(d3, g, d, self) { +function expandOrFoldSector(g, d, d3elem) { if (d.expand !== null && d.depth > 1) { //ignore root node and first level sectors if (d.expand === 0) { - if (d.children) d3.select(self).attr('opacity', 1); + if (d.children) d3elem.attr('opacity', 1); g.filter(function(a) { if (a.parent) return a.parent.id === getValue(d, 'id'); @@ -12,7 +12,7 @@ function expandOrFoldSector(d3, g, d, self) { } else { //if the sector is expanded if (d.children) - d3.select(self).attr('opacity', 1); + d3elem.attr('opacity', 1); hideSector(d, g); } } diff --git a/src/widget.js b/src/widget.js index a179c2a..dbd186d 100644 --- a/src/widget.js +++ b/src/widget.js @@ -275,7 +275,7 @@ class SunburstWidget { getScore(d) { var score = visutil.getValue(d, 'score'); var name = visutil.getValue(d, 'name'); - if (!name) { + if (typeof score === 'undefined' || typeof name === 'undefined') { score = 0; } else { if (score === null) { @@ -303,11 +303,12 @@ class SunburstWidget { var score = this.getScore(d); var id = visutil.getValue(d, 'id'); + var category = visutil.getValue(d, 'category'); var label = name; if (id === 'sbh_dom' || id === 'sbh_parent'){ label = name; - } else if (d.category === 'values') { + } else if (category === 'values') { label = name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); } else { label = name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)'); From 645f5ed7521b8b854cb77bcafbaf649320ab8a91 Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 14:22:27 -0700 Subject: [PATCH 6/8] fix text positioning resolves https://github.com/personality-insights/sunburst-chart/issues/39 --- src/widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widget.js b/src/widget.js index dbd186d..3cd01a7 100644 --- a/src/widget.js +++ b/src/widget.js @@ -184,7 +184,7 @@ class SunburstWidget { var frac = position === 'center' ? 0.5 : position === 'outer' ? 2 / 3 : 1 / 3; var sector_length = self._d3version === 'v3' ? (d.y + d.dy * frac) * d.dx : - (d.y1 * frac) * (d.x1 - d.x0); + (d.y0 + (d.y1 - d.y0) * frac) * (d.x1 - d.x0); var text_length = curNd.getComputedTextLength(); var cur_font_size = self.d3.select(this).attr('font-size'); var new_font_size = cur_font_size * sector_length / text_length; From 469b2fd1a0669dead4498b80bbcb4c18f5e14178 Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 14:29:48 -0700 Subject: [PATCH 7/8] refactor utils also fixed https://github.com/personality-insights/sunburst-chart/issues/40 --- src/d3-renderers/{visutil.js => utils.js} | 4 ++-- .../v3/personality-chart-renderer.js | 14 ++++++------- .../v4/personality-chart-renderer.js | 21 ++++++++----------- src/widget.js | 20 +++++++++--------- 4 files changed, 28 insertions(+), 31 deletions(-) rename src/d3-renderers/{visutil.js => utils.js} (91%) diff --git a/src/d3-renderers/visutil.js b/src/d3-renderers/utils.js similarity index 91% rename from src/d3-renderers/visutil.js rename to src/d3-renderers/utils.js index 56fe513..2a7d7f0 100644 --- a/src/d3-renderers/visutil.js +++ b/src/d3-renderers/utils.js @@ -5,7 +5,7 @@ function expandOrFoldSector(g, d, d3elem) { if (d.children) d3elem.attr('opacity', 1); g.filter(function(a) { if (a.parent) - return a.parent.id === getValue(d, 'id'); + return getValue(a.parent, 'id') === getValue(d, 'id'); }) .attr('visibility', 'visible'); d.expand = 1; @@ -21,7 +21,7 @@ function expandOrFoldSector(g, d, d3elem) { function hideSector(d, g) { g.filter(function(a) { if (a.parent) - return a.parent.id === getValue(d, 'id'); + return getValue(a.parent, 'id') === getValue(d, 'id'); }) .attr('visibility', 'hidden') .attr('opacity', 1) diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index 62e5244..756f5e6 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -21,7 +21,7 @@ Object.assign(d3, ); const d3SvgSingleArc = require('../svg-single-arc'); -const visutil = require('../visutil'); +const utils = require('../utils'); function renderChart(widget) { console.debug('personality-chart-renderer: defining renderChart'); @@ -63,11 +63,11 @@ function renderChart(widget) { //different bar_length factors if (d.parent) { if (d.parent.parent) { - if (d.parent.parent.id === 'needs' || d.parent.parent.id === 'values') { + if (utils.getValue(d.parent.parent, 'id') === 'needs' || utils.getValue(d.parent.parent, 'id') === 'values') { bar_length_factor = 1; } if (d.parent.parent.parent) - if (d.parent.parent.parent.id === 'personality') bar_length_factor = 1; + if (utils.getValue(d.parent.parent.parent, 'id') === 'personality') bar_length_factor = 1; } else { console.debug(d.name + ': Parent is null!'); } @@ -148,7 +148,7 @@ function renderChart(widget) { .attr('d', arc2); //used for label path - var bottom = visutil.isLocatedBottom(d); + var bottom = utils.isLocatedBottom(d); var arc_for_label, arc_for_label_number; var arc_label_radius, arc_label_number_radius; if (d.depth === 1 && bottom) { @@ -160,8 +160,8 @@ function renderChart(widget) { } if (bottom) { //special reversed label for bottom data - arc_for_label = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_radius); - arc_for_label_number = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_number_radius); + arc_for_label = utils.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_radius); + arc_for_label_number = utils.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_number_radius); } else { arc_for_label = d3SvgSingleArc() .startAngle(function(d) { @@ -239,7 +239,7 @@ function renderChart(widget) { d.expand = 1; }) .on('click', function(d) { - visutil.expandOrFoldSector(g, d, d3.select(this)); + utils.expandOrFoldSector(g, d, d3.select(this)); }) .on('mouseover', function(d) { widget.showTooltip(d, this); diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index d82f5de..4cb2668 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -23,7 +23,7 @@ const d3 = Object.assign({}, ); const d3SvgSingleArc = require('../svg-single-arc'); -const visutil = require('../visutil'); +const utils = require('../utils'); function renderChart(widget) { if (!widget.data) { @@ -64,16 +64,13 @@ function renderChart(widget) { //different bar_length factors if (d.parent) { if (d.parent.parent) { - if (d.parent.parent.data.id === 'needs' || d.parent.parent.data.id === 'values') { + if (utils.getValue(d.parent.parent, 'id') === 'needs' || utils.getValue(d.parent.parent, 'id') === 'values') { bar_length_factor = 1; } - if (d.parent.parent.parent) { - if (d.parent.parent.parent.data.id === 'personality') { - bar_length_factor = 1; - } - } + if (d.parent.parent.parent) + if (utils.getValue(d.parent.parent.parent, 'id') === 'personality') bar_length_factor = 1; } else { - console.debug(d.data.name + ': Parent is null!'); + console.debug(d.name + ': Parent is null!'); } } @@ -152,7 +149,7 @@ function renderChart(widget) { widget._childElements.parts[widget.getUniqueId(d, 'arc2')] .attr('d', arc2); - var bottom = visutil.isLocatedBottom(d); + var bottom = utils.isLocatedBottom(d); var arc_for_label, arc_for_label_number; var arc_label_radius, arc_label_number_radius; if (d.depth === 1 && bottom) { @@ -165,8 +162,8 @@ function renderChart(widget) { if (bottom) { //special reversed label for bottom data - arc_for_label = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_radius); - arc_for_label_number = visutil.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_number_radius); + arc_for_label = utils.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_radius); + arc_for_label_number = utils.arc(d.x1 - right_pad - Math.PI / 2, d.x0 - Math.PI / 2, arc_label_number_radius); } else { arc_for_label = d3SvgSingleArc() .startAngle(function(d) { @@ -241,7 +238,7 @@ function renderChart(widget) { d.expand = 1; }) .on('click', function(d) { - visutil.expandOrFoldSector(g, d, d3.select(this)); + utils.expandOrFoldSector(g, d, d3.select(this)); }) .on('mouseover', function(d) { widget.showTooltip(d, this); diff --git a/src/widget.js b/src/widget.js index 3cd01a7..96797e0 100644 --- a/src/widget.js +++ b/src/widget.js @@ -17,7 +17,7 @@ 'use strict'; const colors = require('./utilities/colors'); -const visutil = require('./d3-renderers/visutil'); +const utils = require('./d3-renderers/utils'); class SunburstWidget { @@ -273,8 +273,8 @@ class SunburstWidget { } getScore(d) { - var score = visutil.getValue(d, 'score'); - var name = visutil.getValue(d, 'name'); + var score = utils.getValue(d, 'score'); + var name = utils.getValue(d, 'name'); if (typeof score === 'undefined' || typeof name === 'undefined') { score = 0; } else { @@ -291,19 +291,19 @@ class SunburstWidget { } getScoreLabelText(d) { - var score = visutil.getValue(d, 'score'); + var score = utils.getValue(d, 'score'); return score === null || isNaN(score) ? '' : ' (' + (this.getScore(d) * 100).toFixed(0) + '%)'; } getNameLabelText(d) { - var name = visutil.getValue(d, 'name'); + var name = utils.getValue(d, 'name'); if (!name) { return ''; } var score = this.getScore(d); - var id = visutil.getValue(d, 'id'); - var category = visutil.getValue(d, 'category'); + var id = utils.getValue(d, 'id'); + var category = utils.getValue(d, 'category'); var label = name; if (id === 'sbh_dom' || id === 'sbh_parent'){ @@ -322,7 +322,7 @@ class SunburstWidget { } getUniqueId(d, _class) { - var uid = this.id + '_' + visutil.getValue(d, 'id'); + var uid = this.id + '_' + utils.getValue(d, 'id'); if (_class) { uid += '.' + _class; } @@ -330,7 +330,7 @@ class SunburstWidget { } getColors(d) { - d.coloridx = (d.depth === 1 || d.depth === 0) ? visutil.getValue(d, 'id') : d.parent.coloridx; + d.coloridx = (d.depth === 1 || d.depth === 0) ? utils.getValue(d, 'id') : d.parent.coloridx; if (d.coloridx === 'personality') { return { @@ -365,7 +365,7 @@ class SunburstWidget { var colors = this.getColors(d); var arc1color = d.depth < 2 ? this.d3.color(colors.innerRingLightColor) : this.d3.color(colors.innerRingDarkColor); var strokecolor = arc1color; - var bottom = visutil.isLocatedBottom(d); + var bottom = utils.isLocatedBottom(d); if (!d.children) { uid = this.getUniqueId(d, 'bar'); From 0695efb48a4924b5eb2325382add0a9d69d4945f Mon Sep 17 00:00:00 2001 From: soumak77 Date: Sun, 25 Mar 2018 14:44:52 -0700 Subject: [PATCH 8/8] move common code to utils --- src/d3-renderers/utils.js | 23 ++++++++++- .../v3/personality-chart-renderer.js | 41 ++----------------- .../v4/personality-chart-renderer.js | 40 ++---------------- 3 files changed, 30 insertions(+), 74 deletions(-) diff --git a/src/d3-renderers/utils.js b/src/d3-renderers/utils.js index 2a7d7f0..7ef3fd9 100644 --- a/src/d3-renderers/utils.js +++ b/src/d3-renderers/utils.js @@ -51,9 +51,30 @@ function getValue(d, prop) { return d.data ? d.data[prop] : d[prop]; } +function getBarLengthFactor(d) { + var bar_length_factor = 10 / (d.depth - 2); + + //different bar_length factors + if (d.parent) { + if (d.parent.parent) { + if (getValue(d.parent.parent, 'id') === 'needs' || getValue(d.parent.parent, 'id') === 'values') { + bar_length_factor = 1; + } + if (d.parent.parent.parent) { + if (getValue(d.parent.parent.parent, 'id') === 'personality') { + bar_length_factor = 1; + } + } + } + } + + return bar_length_factor; +} + module.exports = { isLocatedBottom: isLocatedBottom, arc: arc, expandOrFoldSector: expandOrFoldSector, - getValue: getValue + getValue: getValue, + getBarLengthFactor: getBarLengthFactor }; diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js index 756f5e6..765fcc8 100644 --- a/src/d3-renderers/v3/personality-chart-renderer.js +++ b/src/d3-renderers/v3/personality-chart-renderer.js @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global alert */ 'use strict'; const d3 = require('d3'); Object.assign(d3, @@ -24,9 +23,7 @@ const d3SvgSingleArc = require('../svg-single-arc'); const utils = require('../utils'); function renderChart(widget) { - console.debug('personality-chart-renderer: defining renderChart'); - if (!widget.data) { - console.debug('personality-chart-renderer: data not defined.'); + if (!widget.data || !widget.loadingDiv) { return; } @@ -36,11 +33,6 @@ function renderChart(widget) { return; } - if (!widget.loadingDiv) { - alert('Widget is not fully initialized, cannot render BarsWidget'); - return; - } - widget.switchState(1); widget._layout(); @@ -58,23 +50,8 @@ function renderChart(widget) { var score = widget.getScore(d); if (!d.children) { - var bar_length_factor = 10 / (d.depth - 2); - - //different bar_length factors - if (d.parent) { - if (d.parent.parent) { - if (utils.getValue(d.parent.parent, 'id') === 'needs' || utils.getValue(d.parent.parent, 'id') === 'values') { - bar_length_factor = 1; - } - if (d.parent.parent.parent) - if (utils.getValue(d.parent.parent.parent, 'id') === 'personality') bar_length_factor = 1; - } else { - console.debug(d.name + ': Parent is null!'); - } - } - var inner_r = sector_bottom_pad + d.y; - var out_r = sector_bottom_pad + d.y + bar_length_factor * Math.abs(score) * d.dy; + var out_r = sector_bottom_pad + d.y + utils.getBarLengthFactor(d) * Math.abs(score) * d.dy; var _bar = d3.svg.arc() .startAngle(d.x) @@ -100,16 +77,8 @@ function renderChart(widget) { dy_init = 5 + d.dx * 20 * Math.PI; } - var max_label_size = 13, - lable_size = 10; - - if ((7.5 + 15 * Math.PI * d.dx) > max_label_size) { - lable_size = max_label_size; - } - widget._childElements.parts[widget.getUniqueId(d, 'sector_leaf_text')] .attr('dy', dy_init) - .attr('font-size', lable_size) .attr('text-anchor', lbl_anchor) .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x) + ',' + (-(out_r + 5) * Math.cos(d.x)) + ') ' + 'rotate(' + rotate + ')'); } else { @@ -202,15 +171,13 @@ function renderChart(widget) { return twoArcs; } - var width = widget.dimW, - height = widget.dimH; // The flower had a radius of 640 / 1.9 = 336.84 in the original. - var radius = Math.min(width, height) / 3.2; + var radius = Math.min(widget.dimW, widget.dimH) / 3.2; var sector = twoArcsRender(radius); // Center the graph of 'g' widget.vis = widget.d3vis.append('g') - .attr('transform', 'translate(' + (width / 2) + ',' + height / 2 + ')') + .attr('transform', 'translate(' + (widget.dimW / 2) + ',' + widget.dimH / 2 + ')') .append('g'); var profile = { diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js index 4cb2668..6c4964d 100644 --- a/src/d3-renderers/v4/personality-chart-renderer.js +++ b/src/d3-renderers/v4/personality-chart-renderer.js @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* global alert */ 'use strict'; const d3 = Object.assign({}, require('d3-color'), @@ -26,8 +25,7 @@ const d3SvgSingleArc = require('../svg-single-arc'); const utils = require('../utils'); function renderChart(widget) { - if (!widget.data) { - console.error('personality-chart-renderer: data not defined.'); + if (!widget.data || !widget.loadingDiv) { return; } @@ -37,11 +35,6 @@ function renderChart(widget) { return; } - if (!widget.loadingDiv) { - alert('Widget is not fully initialized, cannot render BarsWidget'); - return; - } - widget.switchState(1); widget._layout(); @@ -59,23 +52,8 @@ function renderChart(widget) { var score = widget.getScore(d); if (!d.children) { - var bar_length_factor = 10 / (d.depth - 2); - - //different bar_length factors - if (d.parent) { - if (d.parent.parent) { - if (utils.getValue(d.parent.parent, 'id') === 'needs' || utils.getValue(d.parent.parent, 'id') === 'values') { - bar_length_factor = 1; - } - if (d.parent.parent.parent) - if (utils.getValue(d.parent.parent.parent, 'id') === 'personality') bar_length_factor = 1; - } else { - console.debug(d.name + ': Parent is null!'); - } - } - var inner_r = sector_bottom_pad + d.y0; - var out_r = sector_bottom_pad + d.y0 + bar_length_factor * Math.abs(score) * (d.y1 - d.y0); + var out_r = sector_bottom_pad + d.y0 + utils.getBarLengthFactor(d) * Math.abs(score) * (d.y1 - d.y0); var _bar = d3.arc() .startAngle(d.x0) @@ -101,16 +79,8 @@ function renderChart(widget) { dy_init = 5 + (d.x1 - d.x0) * 20 * Math.PI; } - var max_label_size = 13, - lable_size = 10; - - if ((7.5 + 15 * Math.PI * (d.x1 - d.x0)) > max_label_size) { - lable_size = max_label_size; - } - widget._childElements.parts[widget.getUniqueId(d, 'sector_leaf_text')] .attr('dy', dy_init) - .attr('font-size', lable_size) .attr('text-anchor', lbl_anchor) .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x0) + ',' + (-(out_r + 5) * Math.cos(d.x0)) + ') ' + 'rotate(' + rotate + ')'); } else { @@ -200,15 +170,13 @@ function renderChart(widget) { return twoArcs; } - var width = widget.dimW, - height = widget.dimH; // The flower had a radius of 640 / 1.9 = 336.84 in the original. - var radius = Math.min(width, height) / 3.2; + var radius = Math.min(widget.dimW, widget.dimH) / 3.2; var sector = twoArcsRender(radius); // Center the graph of 'g' widget.vis = widget.d3vis.append('g') - .attr('transform', 'translate(' + (width / 2) + ',' + height / 2 + ')') + .attr('transform', 'translate(' + (widget.dimW / 2) + ',' + widget.dimH / 2 + ')') .append('g'); var profile = {