mirror of https://github.com/vitalif/dimple
Line Refactor - Added Markers
parent
9a278ca26f
commit
4ed5b63da1
|
@ -3666,6 +3666,7 @@ var dimple = {
|
||||||
draw: function (chart, series, duration) {
|
draw: function (chart, series, duration) {
|
||||||
// Get the position data
|
// Get the position data
|
||||||
var data = series._positionData,
|
var data = series._positionData,
|
||||||
|
self = this,
|
||||||
lineData = [],
|
lineData = [],
|
||||||
theseShapes = null,
|
theseShapes = null,
|
||||||
className = "series" + chart.series.indexOf(series),
|
className = "series" + chart.series.indexOf(series),
|
||||||
|
@ -3766,13 +3767,13 @@ var dimple = {
|
||||||
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
||||||
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
||||||
} else {
|
} else {
|
||||||
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
|
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
|
||||||
}
|
}
|
||||||
// Add
|
// Add
|
||||||
markerBacks
|
markerBacks
|
||||||
.enter()
|
.enter()
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.keyString; })
|
||||||
.attr("class", markerBackClasses.join(" "))
|
.attr("class", markerBackClasses.join(" "))
|
||||||
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.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("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;
|
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,
|
updated,
|
||||||
removed;
|
removed;
|
||||||
|
|
||||||
|
@ -3886,12 +3955,14 @@ var dimple = {
|
||||||
.attr("stroke-width", series.lineWeight);
|
.attr("stroke-width", series.lineWeight);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.line; })
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,6 +7,7 @@
|
||||||
draw: function (chart, series, duration) {
|
draw: function (chart, series, duration) {
|
||||||
// Get the position data
|
// Get the position data
|
||||||
var data = series._positionData,
|
var data = series._positionData,
|
||||||
|
self = this,
|
||||||
lineData = [],
|
lineData = [],
|
||||||
theseShapes = null,
|
theseShapes = null,
|
||||||
className = "series" + chart.series.indexOf(series),
|
className = "series" + chart.series.indexOf(series),
|
||||||
|
@ -107,13 +108,13 @@
|
||||||
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
||||||
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
||||||
} else {
|
} else {
|
||||||
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
|
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
|
||||||
}
|
}
|
||||||
// Add
|
// Add
|
||||||
markerBacks
|
markerBacks
|
||||||
.enter()
|
.enter()
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.keyString; })
|
||||||
.attr("class", markerBackClasses.join(" "))
|
.attr("class", markerBackClasses.join(" "))
|
||||||
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.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("cy", function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); })
|
||||||
|
@ -143,6 +144,74 @@
|
||||||
series._markerBacks = markerBacks;
|
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,
|
updated,
|
||||||
removed;
|
removed;
|
||||||
|
|
||||||
|
@ -227,12 +296,14 @@
|
||||||
.attr("stroke-width", series.lineWeight);
|
.attr("stroke-width", series.lineWeight);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.line; })
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
|
|
|
@ -3666,6 +3666,7 @@ var dimple = {
|
||||||
draw: function (chart, series, duration) {
|
draw: function (chart, series, duration) {
|
||||||
// Get the position data
|
// Get the position data
|
||||||
var data = series._positionData,
|
var data = series._positionData,
|
||||||
|
self = this,
|
||||||
lineData = [],
|
lineData = [],
|
||||||
theseShapes = null,
|
theseShapes = null,
|
||||||
className = "series" + chart.series.indexOf(series),
|
className = "series" + chart.series.indexOf(series),
|
||||||
|
@ -3766,13 +3767,13 @@ var dimple = {
|
||||||
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
if (chart._group.selectAll("." + markerBackClasses.join("."))[0].length === 0) {
|
||||||
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
markerBacks = chart._group.selectAll("." + markerBackClasses.join(".")).data(lineDataRow.data);
|
||||||
} else {
|
} else {
|
||||||
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.key; });
|
markerBacks = series._markerBacks.data(lineDataRow.data, function (d) { return d.keyString; });
|
||||||
}
|
}
|
||||||
// Add
|
// Add
|
||||||
markerBacks
|
markerBacks
|
||||||
.enter()
|
.enter()
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.keyString; })
|
||||||
.attr("class", markerBackClasses.join(" "))
|
.attr("class", markerBackClasses.join(" "))
|
||||||
.attr("cx", function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.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("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;
|
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,
|
updated,
|
||||||
removed;
|
removed;
|
||||||
|
|
||||||
|
@ -3886,12 +3955,14 @@ var dimple = {
|
||||||
.attr("stroke-width", series.lineWeight);
|
.attr("stroke-width", series.lineWeight);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.line; })
|
||||||
.each(drawMarkerBacks);
|
.each(drawMarkerBacks)
|
||||||
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
|
|
Loading…
Reference in New Issue