Skip to content

Commit 1bcfcb9

Browse files
johnkiernanderjohnkiernander
committed
Updates to Chart Drawing
Fixes #4 #15 #28 #40
1 parent b90908b commit 1bcfcb9

9 files changed

Lines changed: 371 additions & 78 deletions

File tree

‎dist/dimple.v1.1.4.js‎

Lines changed: 180 additions & 37 deletions
Large diffs are not rendered by default.

‎dist/dimple.v1.1.4.min.js‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/bars_horizontal.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
myChart.addMeasureAxis("x", "Unit Sales");
1313
var y = myChart.addCategoryAxis("y", "Month");
1414
y.addOrderRule("Date");
15-
myChart.addSeries(null, dimple.plot.bar);
15+
var s1 = myChart.addSeries(null, dimple.plot.bar);
16+
s1.data = data;
17+
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
18+
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
1619
myChart.draw();
1720
});
1821
</script>

‎examples/templates/bars_horizontal.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
myChart.addMeasureAxis("x", "Unit Sales");
1010
var y = myChart.addCategoryAxis("y", "Month");
1111
y.addOrderRule("Date");
12-
myChart.addSeries(null, dimple.plot.bar);
12+
var s1 = myChart.addSeries(null, dimple.plot.bar);
13+
s1.data = data;
14+
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
15+
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
1316
myChart.draw();
1417
});
1518
</script>

‎src/objects/chart/methods/_registerEventHandlers.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,16 @@
55
this._registerEventHandlers = function (series) {
66
if (series._eventHandlers !== null && series._eventHandlers.length > 0) {
77
series._eventHandlers.forEach(function (thisHandler) {
8+
var shapes = null;
89
if (thisHandler.handler !== null && typeof (thisHandler.handler) === "function") {
9-
series.shapes.on(thisHandler.event, function (d) {
10+
// Some classes work from markers rather than the shapes (line and area for example)
11+
// in these cases the events should be applied to the markers instead. Issue #15
12+
if (series._markers !== null && series._markers !== undefined) {
13+
shapes = series._markers;
14+
} else {
15+
shapes = series.shapes;
16+
}
17+
shapes.on(thisHandler.event, function (d) {
1018
var e = new dimple.eventArgs();
1119
if (series.chart.storyboard !== null) {
1220
e.frameValue = series.chart.storyboard.getFrameValue();

‎src/objects/plot/area.js‎

Lines changed: 79 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
graded = false,
1616
line,
1717
catPoints = {},
18-
markers;
18+
markers,
19+
markerBacks;
1920

2021
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
2122
chart._tooltipGroup.remove();
@@ -65,7 +66,7 @@
6566
.data(uniqueValues)
6667
.transition()
6768
.duration(duration)
68-
.attr("class", function (d) { return "series area " + d.replace(" ", ""); })
69+
.attr("class", function (d) { return "series area " + d.split(" ").join("_"); })
6970
.attr("d", function (d) {
7071
var seriesData,
7172
baseline = [],
@@ -147,43 +148,101 @@
147148
}
148149
});
149150

150-
// Add line markers.
151-
markers = chart._group.selectAll(".markers")
152-
.data(data)
153-
.enter();
154-
155-
// Add a fully opaque white circle first so we don't see a ghost of the line
156151
if (series.lineMarkers) {
157-
markers.append("circle")
152+
if (series._markerBacks === null || series._markerBacks === undefined) {
153+
markerBacks = chart._group.selectAll(".markerBacks").data(data);
154+
} else {
155+
markerBacks = series._markerBacks.data(data, function (d) { return d.key; });
156+
}
157+
// Add
158+
markerBacks
159+
.enter()
160+
.append("circle")
161+
.attr("id", function (d) { return d.key; })
162+
.attr("class", "markerBacks")
163+
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
164+
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
165+
.attr("r", 0)
166+
.attr("fill", "white")
167+
.attr("stroke", "none");
168+
169+
// Update
170+
markerBacks
158171
.transition().duration(duration)
159-
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
160-
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
161-
.attr("r", 2 + series.lineWeight)
162-
.attr("fill", "white")
163-
.attr("stroke", "none");
172+
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
173+
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
174+
.attr("r", 2 + series.lineWeight);
175+
// Remove
176+
markerBacks
177+
.exit()
178+
.transition().duration(duration)
179+
.attr("r", 0)
180+
.each("end", function () {
181+
d3.select(this).remove();
182+
});
183+
series._markerBacks = markerBacks;
184+
}
185+
186+
// Deal with markers in the same way as main series to fix #28
187+
if (series._markers === null || series._markers === undefined) {
188+
markers = chart._group.selectAll(".markers").data(data);
189+
} else {
190+
markers = series._markers.data(data, function (d) { return d.key; });
164191
}
165192

193+
166194
// Add the actual marker. We need to do this even if we aren't displaying them because they
167195
// catch hover events
168-
markers.append("circle")
196+
markers
197+
.enter()
198+
.append("circle")
199+
.attr("id", function (d) { return d.key; })
200+
.attr("class", "markers")
169201
.on("mouseover", function (e) {
170202
self.enterEventHandler(e, this, chart, series);
171203
})
172204
.on("mouseleave", function (e) {
173205
self.leaveEventHandler(e, this, chart, series);
174206
})
207+
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
208+
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
209+
.attr("r", 0)
210+
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
211+
.call(function () {
212+
if (!chart.noFormats) {
213+
this.attr("fill", "white")
214+
.style("stroke-width", series.lineWeight)
215+
.attr("stroke", function (d) {
216+
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
217+
});
218+
}
219+
});
220+
221+
markers
175222
.transition().duration(duration)
176223
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
177224
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
178225
.attr("r", 2 + series.lineWeight)
179-
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
180226
.call(function () {
181227
if (!chart.noFormats) {
182228
this.attr("fill", "white")
183229
.style("stroke-width", series.lineWeight)
184-
.attr("stroke", function (d) { return dimple._helpers.stroke(d, chart, series); });
230+
.attr("stroke", function (d) {
231+
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
232+
});
185233
}
186234
});
235+
236+
markers
237+
.exit()
238+
.transition().duration(duration)
239+
.attr("r", 0)
240+
.each("end", function () {
241+
d3.select(this).remove();
242+
});
243+
244+
// Save the shapes to the series array
245+
series._markers = markers;
187246
},
188247

189248
// Handle the mouse enter event
@@ -293,7 +352,8 @@
293352
// Add a group for text
294353
t = chart._tooltipGroup.append("g");
295354
// Create a box for the popup in the text group
296-
box = t.append("rect");
355+
box = t.append("rect")
356+
.attr("class", "tooltip");
297357

298358
// Add the series categories
299359
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@@ -346,6 +406,7 @@
346406
// Create a text object for every row in the popup
347407
t.selectAll(".textHoverShapes").data(rows).enter()
348408
.append("text")
409+
.attr("class", "tooltip")
349410
.text(function (d) { return d; })
350411
.style("font-family", "sans-serif")
351412
.style("font-size", "10px");

‎src/objects/plot/bar.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,12 @@
3535
.enter()
3636
.append("rect")
3737
.attr("id", function (d) { return d.key; })
38-
.attr("class", function (d) { return className + " bar " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" "); })
38+
.attr("class", function (d) {
39+
return className + " bar " +
40+
d.aggField.join(" ").split(" ").join("_") + " " +
41+
d.xField.join(" ").split(" ").join("_") + " " +
42+
d.yField.join(" ").split(" ").join("_");
43+
})
3944
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
4045
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
4146
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
@@ -175,7 +180,8 @@
175180
// Add a group for text
176181
t = chart._tooltipGroup.append("g");
177182
// Create a box for the popup in the text group
178-
box = t.append("rect");
183+
box = t.append("rect")
184+
.attr("class", "tooltip");
179185

180186
// Add the series categories
181187
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@@ -223,6 +229,7 @@
223229
// Create a text object for every row in the popup
224230
t.selectAll(".textHoverShapes").data(rows).enter()
225231
.append("text")
232+
.attr("class", "tooltip")
226233
.text(function (d) { return d; })
227234
.style("font-family", "sans-serif")
228235
.style("font-size", "10px");

‎src/objects/plot/bubble.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,13 @@
3535
.enter()
3636
.append("circle")
3737
.attr("id", function (d) { return d.key; })
38-
.attr("class", function (d) { return className + " bubble " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" ") + " " + d.zField.join(" "); })
38+
.attr("class", function (d) {
39+
return className + " bubble " +
40+
d.aggField.join(" ").split(" ").join("_") + " " +
41+
d.xField.join(" ").split(" ").join("_") + " " +
42+
d.yField.join(" ").split(" ").join("_") + " " +
43+
d.zField.join(" ").split(" ").join("_");
44+
})
3945
.attr("cx", function (d) {
4046
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
4147
})
@@ -196,7 +202,8 @@
196202
// Add a group for text
197203
t = chart._tooltipGroup.append("g");
198204
// Create a box for the popup in the text group
199-
box = t.append("rect");
205+
box = t.append("rect")
206+
.attr("class", "tooltip");
200207

201208
// Add the series categories
202209
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
@@ -249,6 +256,7 @@
249256
// Create a text object for every row in the popup
250257
t.selectAll(".textHoverShapes").data(rows).enter()
251258
.append("text")
259+
.attr("class", "tooltip")
252260
.text(function (d) { return d; })
253261
.style("font-family", "sans-serif")
254262
.style("font-size", "10px");

0 commit comments

Comments
 (0)