From 2b01578c98c7d0cb243209e445d08dba5b06d817 Mon Sep 17 00:00:00 2001 From: turbio Date: Thu, 15 Sep 2016 15:31:07 -0700 Subject: [PATCH 1/4] modify circles to accept optionaly react component --- src/ReactBubbleChartD3.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/ReactBubbleChartD3.js b/src/ReactBubbleChartD3.js index 4bf7e59..0f1a43d 100644 --- a/src/ReactBubbleChartD3.js +++ b/src/ReactBubbleChartD3.js @@ -15,6 +15,7 @@ //------------------------------------------------------------------------------ import d3 from 'd3'; +import ReactDOM from 'react-dom'; /** * Properties defined during construction: @@ -268,7 +269,7 @@ export default class ReactBubbleChartD3 { .attr('r', d => d.r) .style('opacity', 1); // intialize new labels - labels.enter().append('div') + var newLabels = labels.enter().append('div') .attr('class', d => { var size; if (2*d.r < this.smallDiameter) size = 'small'; @@ -276,7 +277,6 @@ export default class ReactBubbleChartD3 { else size = 'large'; return 'bubble-label ' + size }) - .text(d => d.displayText || d._id) .on('click', (d, i) => {d3.event.stopPropagation(); props.onClick(d)}) .on('mouseover', this._tooltipMouseOver.bind(this, color, el)) .on('mouseout', this._tooltipMouseOut.bind(this)) @@ -286,11 +286,20 @@ export default class ReactBubbleChartD3 { .style('left', d => d.x - d.r + 'px') .style('top', d => d.y - d.r + 'px') .style('color', d => d.selected ? this.selectedTextColor : textColor(d.colorValue)) - .style('opacity', 0) - .transition() + .style('opacity', 0); + + newLabels.transition() .duration(duration * 1.2) .style('opacity', 1) .style('font-size', d => fontFactor ? fontFactor * d.r + 'px' : null); + + newLabels.each(function(d){ + if (typeof d.displayText === 'object') { + ReactDOM.render(d.displayText, this); + } else { + d3.select(this).text(d.displayText); + } + }); } // exit - only applies to... exiting elements From 2c3a4354f7e3d009bf2af0e55ce633224f5aab95 Mon Sep 17 00:00:00 2001 From: turbio Date: Thu, 15 Sep 2016 15:35:12 -0700 Subject: [PATCH 2/4] reformat to fix existing style --- src/ReactBubbleChartD3.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/ReactBubbleChartD3.js b/src/ReactBubbleChartD3.js index 0f1a43d..4a55b7d 100644 --- a/src/ReactBubbleChartD3.js +++ b/src/ReactBubbleChartD3.js @@ -269,7 +269,7 @@ export default class ReactBubbleChartD3 { .attr('r', d => d.r) .style('opacity', 1); // intialize new labels - var newLabels = labels.enter().append('div') + labels.enter().append('div') .attr('class', d => { var size; if (2*d.r < this.smallDiameter) size = 'small'; @@ -277,6 +277,13 @@ export default class ReactBubbleChartD3 { else size = 'large'; return 'bubble-label ' + size }) + .each(function(d){ + if (typeof d.displayText === 'object') { + ReactDOM.render(d.displayText, this); + } else { + d3.select(this).text(d.displayText); + } + }) .on('click', (d, i) => {d3.event.stopPropagation(); props.onClick(d)}) .on('mouseover', this._tooltipMouseOver.bind(this, color, el)) .on('mouseout', this._tooltipMouseOut.bind(this)) @@ -286,20 +293,12 @@ export default class ReactBubbleChartD3 { .style('left', d => d.x - d.r + 'px') .style('top', d => d.y - d.r + 'px') .style('color', d => d.selected ? this.selectedTextColor : textColor(d.colorValue)) - .style('opacity', 0); - - newLabels.transition() + .style('opacity', 0) + .transition() .duration(duration * 1.2) .style('opacity', 1) .style('font-size', d => fontFactor ? fontFactor * d.r + 'px' : null); - newLabels.each(function(d){ - if (typeof d.displayText === 'object') { - ReactDOM.render(d.displayText, this); - } else { - d3.select(this).text(d.displayText); - } - }); } // exit - only applies to... exiting elements From f619453be1b7b3f0da10948d606d75c7ad235984 Mon Sep 17 00:00:00 2001 From: turbio Date: Thu, 15 Sep 2016 16:05:52 -0700 Subject: [PATCH 3/4] remote trailing newline --- src/ReactBubbleChartD3.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ReactBubbleChartD3.js b/src/ReactBubbleChartD3.js index 4a55b7d..67bba2e 100644 --- a/src/ReactBubbleChartD3.js +++ b/src/ReactBubbleChartD3.js @@ -298,7 +298,6 @@ export default class ReactBubbleChartD3 { .duration(duration * 1.2) .style('opacity', 1) .style('font-size', d => fontFactor ? fontFactor * d.r + 'px' : null); - } // exit - only applies to... exiting elements From 62f277bb74b3ce87ec4aac1fcfde784add293ae6 Mon Sep 17 00:00:00 2001 From: turbio Date: Thu, 15 Sep 2016 16:28:44 -0700 Subject: [PATCH 4/4] preserve original functionality --- src/ReactBubbleChartD3.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactBubbleChartD3.js b/src/ReactBubbleChartD3.js index 67bba2e..b26382b 100644 --- a/src/ReactBubbleChartD3.js +++ b/src/ReactBubbleChartD3.js @@ -281,7 +281,7 @@ export default class ReactBubbleChartD3 { if (typeof d.displayText === 'object') { ReactDOM.render(d.displayText, this); } else { - d3.select(this).text(d.displayText); + d3.select(this).text(() => d.displayText || d._id); } }) .on('click', (d, i) => {d3.event.stopPropagation(); props.onClick(d)})