vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Line Refactor - Added Markers

master
johnkiernander 2014-04-09 10:37:12 +01:00
parent 9a278ca26f
commit 4ed5b63da1
4 changed files with 227 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
dist/dimple.v1.2.0.js vendored
View File

@ -3666,6 +3666,7 @@ var dimple = {
draw: function (chart, series, duration) {
// Get the position data
var data = series._positionData,
self = this,
lineData = [],
theseShapes = null,
className = "series" + chart.series.indexOf(series),
@ -3766,13 +3767,13 @@ var dimple = {
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
} else {
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("id", function (d) { return d.keyString; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
@ -3802,6 +3803,74 @@ var dimple = {
series._markerBacks = markerBacks;
}
},
// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
drawMarkers = function (lineDataRow) {
var markers,
markerClasses = ["markers", className, lineDataRow.keyString],
rem;
// Deal with markers in the same way as main series to fix #28
if (chart._group.selectAll("." + markerClasses.join("."))[0].length === 0) {
markers = chart._group.selectAll("." + markerClasses.join(".")).data(lineDataRow.data);
} else {
markers = series._markers.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.keyString; })
.attr("class", markerClasses.join(" "))
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Update
addTransition(markers, duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Remove
rem = addTransition(markers.exit(), duration)
.attr("r", 0);
// Run after transition methods
if (duration === 0) {
rem.remove();
} else {
rem.each("end", function () {
d3.select(this).remove();
});
}
series._markers = markers;
},
updated,
removed;
@ -3886,12 +3955,14 @@ var dimple = {
.attr("stroke-width", series.lineWeight);
}
})
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)

4
dist/dimple.v1.2.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

79
src/objects/plot/line.js
View File

@ -7,6 +7,7 @@
draw: function (chart, series, duration) {
// Get the position data
var data = series._positionData,
self = this,
lineData = [],
theseShapes = null,
className = "series" + chart.series.indexOf(series),
@ -107,13 +108,13 @@
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
} else {
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("id", function (d) { return d.keyString; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
@ -143,6 +144,74 @@
series._markerBacks = markerBacks;
}
},
// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
drawMarkers = function (lineDataRow) {
var markers,
markerClasses = ["markers", className, lineDataRow.keyString],
rem;
// Deal with markers in the same way as main series to fix #28
if (chart._group.selectAll("." + markerClasses.join("."))[0].length === 0) {
markers = chart._group.selectAll("." + markerClasses.join(".")).data(lineDataRow.data);
} else {
markers = series._markers.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.keyString; })
.attr("class", markerClasses.join(" "))
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Update
addTransition(markers, duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Remove
rem = addTransition(markers.exit(), duration)
.attr("r", 0);
// Run after transition methods
if (duration === 0) {
rem.remove();
} else {
rem.each("end", function () {
d3.select(this).remove();
});
}
series._markers = markers;
},
updated,
removed;
@ -227,12 +296,14 @@
.attr("stroke-width", series.lineWeight);
}
})
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)

79
tmp/dimple.js
View File

@ -3666,6 +3666,7 @@ var dimple = {
draw: function (chart, series, duration) {
// Get the position data
var data = series._positionData,
self = this,
lineData = [],
theseShapes = null,
className = "series" + chart.series.indexOf(series),
@ -3766,13 +3767,13 @@ var dimple = {
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
} else {
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("id", function (d) { return d.keyString; })
.attr("class", markerBackClasses.join(" "))
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
@ -3802,6 +3803,74 @@ var dimple = {
series._markerBacks = markerBacks;
}
},
// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
drawMarkers = function (lineDataRow) {
var markers,
markerClasses = ["markers", className, lineDataRow.keyString],
rem;
// Deal with markers in the same way as main series to fix #28
if (chart._group.selectAll("." + markerClasses.join("."))[0].length === 0) {
markers = chart._group.selectAll("." + markerClasses.join(".")).data(lineDataRow.data);
} else {
markers = series._markers.data(lineDataRow.data, function (d) { return d.keyString; });
}
// Add
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.keyString; })
.attr("class", markerClasses.join(" "))
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
.attr("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Update
addTransition(markers, duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});
// Remove
rem = addTransition(markers.exit(), duration)
.attr("r", 0);
// Run after transition methods
if (duration === 0) {
rem.remove();
} else {
rem.each("end", function () {
d3.select(this).remove();
});
}
series._markers = markers;
},
updated,
removed;
@ -3886,12 +3955,14 @@ var dimple = {
.attr("stroke-width", series.lineWeight);
}
})
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Update
updated = addTransition(theseShapes, duration)
.attr("d", function (d) { return d.line; })
.each(drawMarkerBacks);
.each(drawMarkerBacks)
.each(drawMarkers);
// Remove
removed = addTransition(theseShapes.exit(), duration)