Skip to content

Commit f6b245e

Browse files
t-mullent-mullen
committed
fix($core): Fixes opacity transitions not completing when data is updated. Ensures use SVG vs CSS op
1 parent 63713b3 commit f6b245e

File tree

6 files changed

+27
-24
lines changed

6 files changed

+27
-24
lines changed

‎packages/core/src/bar-chart.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,13 +174,13 @@ export class BarChart extends BaseAxisChart {
174174
// Remove bar groups are no longer needed
175175
g.exit()
176176
.transition(this.getDefaultTransition())
177-
.style("opacity", 0)
177+
.attr("opacity", 0)
178178
.remove();
179179

180180
// Remove bars that are no longer needed
181181
rect.exit()
182182
.transition(this.getDefaultTransition())
183-
.style("opacity", 0)
183+
.attr("opacity", 0)
184184
.remove();
185185

186186
// Add slice hover actions, and clear any slice borders present
@@ -213,6 +213,7 @@ export class BarChart extends BaseAxisChart {
213213
.transition(animate ? this.getFillTransition() : this.getInstantTransition())
214214
// TODO
215215
// .ease(d3.easeCircle)
216+
.attr("opacity", 1)
216217
.attr("x", d => this.x1(d.datasetLabel))
217218
.attr("y", d => this.y(Math.max(0, d.value)))
218219
.attr("width", this.x1.bandwidth())

‎packages/core/src/base-axis-chart.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -492,7 +492,7 @@ export class BaseAxisChart extends BaseChart {
492492
// Applies to thresholds getting removed
493493
thresholdRects.exit()
494494
.transition(t)
495-
.style("opacity", 0)
495+
.attr("opacity", 0)
496496
.remove();
497497
}
498498

‎packages/core/src/base-chart.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -801,10 +801,10 @@ export class BaseChart {
801801
this.resetOpacity();
802802

803803
const tooltipRef = select(this.holder).select("div.chart-tooltip");
804-
tooltipRef.style("opacity", 1)
804+
tooltipRef.attr("opacity", 1)
805805
.transition()
806806
.duration(Configuration.tooltip.fadeOut.duration)
807-
.style("opacity", 0)
807+
.attr("opacity", 0)
808808
.remove();
809809

810810
this.removeTooltipEventListeners();
@@ -890,10 +890,10 @@ export class BaseChart {
890890
tooltip.style("left", mouse(this.holder as SVGSVGElement)[0] + Configuration.tooltip.magicLeft2 + "px");
891891
}
892892

893-
tooltip.style("opacity", 0)
893+
tooltip.attr("opacity", 0)
894894
.transition()
895895
.duration(Configuration.tooltip.fadeIn.duration)
896-
.style("opacity", 1);
896+
.attr("opacity", 1);
897897

898898
this.addTooltipEventListeners(tooltip);
899899
}

‎packages/core/src/line-chart.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,9 @@ export class LineChart extends BaseAxisChart {
118118
addedLineGroups.append("path")
119119
.attr("stroke", d => this.colorScale[d.label]())
120120
.datum(d => d.data)
121-
.style("opacity", 0)
121+
.attr("opacity", 0)
122122
.transition(this.getDefaultTransition())
123-
.style("opacity", 1)
123+
.attr("opacity", 1)
124124
.attr("class", "line")
125125
.attr("d", this.lineGenerator);
126126

@@ -133,15 +133,15 @@ export class LineChart extends BaseAxisChart {
133133
.attr("cx", (d, i) => this.x(d.label) + this.x.step() / 2)
134134
.attr("cy", (d: any) => this.y(d.value))
135135
.attr("r", 4)
136-
.style("opacity", 0)
136+
.attr("opacity", 0)
137137
.transition(this.getDefaultTransition())
138-
.style("opacity", 1)
138+
.attr("opacity", 1)
139139
.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
140140

141141
// Remove lines that are no longer needed
142142
gLines.exit()
143143
.transition(this.getDefaultTransition())
144-
.style("opacity", 0)
144+
.attr("opacity", 0)
145145
.remove();
146146

147147
// Add slice hover actions, and clear any slice borders present
@@ -173,6 +173,7 @@ export class LineChart extends BaseAxisChart {
173173
return parentDatum.data;
174174
})
175175
.transition(transitionToUse)
176+
.attr("opacity", 1)
176177
.attr("stroke", function(d) {
177178
const parentDatum = select(this.parentNode).datum() as any;
178179

‎packages/core/src/pie-chart.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -170,14 +170,14 @@ export class PieChart extends BaseChart {
170170
.attr("d", this.arc)
171171
.transition()
172172
.duration(0)
173-
.style("opacity", 0)
173+
.attr("opacity", 0)
174174
.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
175175
.attr("stroke-width", Configuration.pie.default.strokeWidth)
176176
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
177177
.transition()
178178
.duration(Configuration.transitions.default.duration)
179179
.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
180-
.style("opacity", 1)
180+
.attr("opacity", 1)
181181
.attrTween("d", function (a) {
182182
return arcTween.bind(this)(a, self.arc);
183183
});
@@ -187,19 +187,19 @@ export class PieChart extends BaseChart {
187187
.attr("d", this.arc)
188188
.transition()
189189
.duration(Configuration.transitions.default.duration)
190-
.style("opacity", 0)
190+
.attr("opacity", 0)
191191
.remove();
192192

193193
// Fade out all text labels
194194
this.innerWrap.selectAll("text.chart-label")
195195
.transition()
196196
.duration(Configuration.transitions.default.duration / 2)
197-
.style("opacity", 0)
197+
.attr("opacity", 0)
198198
.on("end", function(d) {
199199
select(this)
200200
.transition()
201201
.duration(Configuration.transitions.default.duration / 2)
202-
.style("opacity", 1);
202+
.attr("opacity", 1);
203203
});
204204

205205
// Move text labels to their new location, and fade them in again
@@ -216,18 +216,18 @@ export class PieChart extends BaseChart {
216216
.style("text-anchor", "middle")
217217
.text(d => Tools.convertValueToPercentage(d.data.value, dataList))
218218
.attr("transform", function (d) { return self.deriveTransformString(this, d, radius); })
219-
.style("opacity", 0)
219+
.attr("opacity", 0)
220220
.transition()
221221
.duration(Configuration.transitions.default.duration / 2)
222-
.style("opacity", 1);
222+
.attr("opacity", 1);
223223

224224
text
225225
.style("text-anchor", "middle")
226226
.text(d => Tools.convertValueToPercentage(d.data.value, dataList))
227227
.attr("transform", function (d) { return self.deriveTransformString(this, d, radius); })
228228
.transition()
229229
.duration(Configuration.transitions.default.duration / 2)
230-
.style("opacity", 1);
230+
.attr("opacity", 1);
231231

232232
text
233233
.exit()
@@ -279,10 +279,10 @@ export class PieChart extends BaseChart {
279279
tooltip.style("left", mouse(this.holder as SVGSVGElement)[0] + Configuration.tooltip.magicLeft2 + "px");
280280
}
281281

282-
tooltip.style("opacity", 0)
282+
tooltip.attr("opacity", 0)
283283
.transition()
284284
.duration(Configuration.tooltip.fadeIn.duration)
285-
.style("opacity", 1);
285+
.attr("opacity", 1);
286286

287287
this.addTooltipEventListeners(tooltip);
288288
}

‎packages/core/src/stacked-bar-chart.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,12 @@ export class StackedBarChart extends BaseAxisChart {
147147

148148
g.exit()
149149
.transition(this.getDefaultTransition())
150-
.style("opacity", 0)
150+
.attr("opacity", 0)
151151
.remove();
152152

153153
rect.exit()
154154
.transition(this.getDefaultTransition())
155-
.style("opacity", 0)
155+
.attr("opacity", 0)
156156
.remove();
157157

158158
// Add slice hover actions, and clear any slice borders present
@@ -198,6 +198,7 @@ export class StackedBarChart extends BaseAxisChart {
198198
// Update existing bars
199199
rect
200200
.transition(animate ? this.getFillTransition() : this.getInstantTransition())
201+
.attr("opacity", 1)
201202
.attr("x", d => this.x(d.data.label))
202203
.attr("y", d => this.y(d[1]))
203204
.attr("height", d => this.y(d[0]) - this.y(d[1]))

0 commit comments

Comments
 (0)