mirror of https://github.com/vitalif/dimple
In Out Animation Improvement
parent
1e867416ac
commit
6ec000b3d6
|
@ -3365,10 +3365,10 @@ var dimple = {
|
||||||
d.zField.join(" ").split(" ").join("_");
|
d.zField.join(" ").split(" ").join("_");
|
||||||
})
|
})
|
||||||
.attr("cx", function (d) {
|
.attr("cx", function (d) {
|
||||||
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
|
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("cy", function (d) {
|
.attr("cy", function (d) {
|
||||||
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
|
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
|
@ -3679,13 +3679,17 @@ var dimple = {
|
||||||
// the first aggField defines the points and the others define the line
|
// the first aggField defines the points and the others define the line
|
||||||
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
lineCoords = d3.svg.line()
|
updateCoords = d3.svg.line()
|
||||||
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
|
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
|
||||||
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
|
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
entryExitCoords = d3.svg.line()
|
entryCoords = d3.svg.line()
|
||||||
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
|
||||||
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
|
||||||
|
// Build the point calculator
|
||||||
|
exitCoords = d3.svg.line()
|
||||||
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
|
||||||
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
|
||||||
graded = false,
|
graded = false,
|
||||||
i,
|
i,
|
||||||
k,
|
k,
|
||||||
|
@ -3780,8 +3784,8 @@ var dimple = {
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.key; })
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("fill", "white")
|
.attr("fill", "white")
|
||||||
.attr("stroke", "none");
|
.attr("stroke", "none");
|
||||||
|
@ -3794,6 +3798,8 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markerBacks.exit(), duration)
|
rem = addTransition(markerBacks.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -3835,8 +3841,8 @@ var dimple = {
|
||||||
.on("mouseleave", function (e) {
|
.on("mouseleave", function (e) {
|
||||||
self.leaveEventHandler(e, this, chart, series);
|
self.leaveEventHandler(e, this, chart, series);
|
||||||
})
|
})
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
||||||
.call(function () {
|
.call(function () {
|
||||||
|
@ -3866,6 +3872,8 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markers.exit(), duration)
|
rem = addTransition(markers.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -3938,9 +3946,11 @@ var dimple = {
|
||||||
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
||||||
}
|
}
|
||||||
// Get the points that this line will appear
|
// Get the points that this line will appear
|
||||||
lineData[i].entryExit = entryExitCoords(lineData[i].data);
|
lineData[i].entry = entryCoords(lineData[i].data);
|
||||||
// Get the actual points of the line
|
// Get the actual points of the line
|
||||||
lineData[i].line = lineCoords(lineData[i].data);
|
lineData[i].update = updateCoords(lineData[i].data);
|
||||||
|
// Get the actual points of the line
|
||||||
|
lineData[i].exit = exitCoords(lineData[i].data);
|
||||||
// Add the color in this loop, it can't be done during initialisation of the row becase
|
// Add the color in this loop, it can't be done during initialisation of the row becase
|
||||||
// the lines should be ordered first (to ensure standard distribution of colors
|
// the lines should be ordered first (to ensure standard distribution of colors
|
||||||
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
||||||
|
@ -3965,7 +3975,7 @@ var dimple = {
|
||||||
return className + " dmp-line " + d.keyString;
|
return className + " dmp-line " + d.keyString;
|
||||||
})
|
})
|
||||||
.attr("d", function (d) {
|
.attr("d", function (d) {
|
||||||
return d.entryExit;
|
return d.entry;
|
||||||
})
|
})
|
||||||
.call(function () {
|
.call(function () {
|
||||||
// Apply formats optionally
|
// Apply formats optionally
|
||||||
|
@ -3981,13 +3991,13 @@ var dimple = {
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.update; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
.attr("d", function (d) { return d.entryExit; })
|
.attr("d", function (d) { return d.exit; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,66 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.2.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var dim = {"width":590,"height":450}; //chart container width
|
||||||
|
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
|
||||||
|
|
||||||
|
function barplot(id,dim,data)
|
||||||
|
{
|
||||||
|
keys = Object.keys(data[0]);
|
||||||
|
var xcord = keys[0];
|
||||||
|
var ycord = keys[1];
|
||||||
|
var svg = dimple.newSvg(id, dim.width, dim.height);
|
||||||
|
|
||||||
|
var myChart = new dimple.chart(svg,data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
|
||||||
|
var x = myChart.addCategoryAxis("x", xcord);
|
||||||
|
x.addOrderRule(xcord);
|
||||||
|
x.showGridlines = true;
|
||||||
|
|
||||||
|
var y = myChart.addMeasureAxis("y", ycord);
|
||||||
|
y.showGridlines = true;
|
||||||
|
y.tickFormat = ',.1f';
|
||||||
|
|
||||||
|
var xDummy = myChart.addTimeAxis("x", "date", "%y", "%y");
|
||||||
|
xDummy.overrideMin = d3.time.format("%y").parse("00");
|
||||||
|
xDummy.overrideMax = d3.time.format("%y").parse("01");
|
||||||
|
xDummy.hidden = true;
|
||||||
|
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.bar);
|
||||||
|
var s1 = myChart.addSeries(null, dimple.plot.line);
|
||||||
|
s1.lineWeight = 3;
|
||||||
|
s1.lineMarkers = true;
|
||||||
|
|
||||||
|
|
||||||
|
var s3 = myChart.addSeries("Price Break", dimple.plot.line, [xDummy, y]);
|
||||||
|
s3.data = [
|
||||||
|
{ "Price Break" : "high", "cost" : 12.71, "date" : "00" }, { "Price Break" : "high", "cost" : 12.71, "date" : "01" },
|
||||||
|
{ "Price Break" : "avg", "cost" : 11.65, "date" : "00" }, { "Price Break" : "avg", "cost" : 11.65, "date" : "01" },
|
||||||
|
{ "Price Break" : "low", "cost" : 10.82, "date" : "00" }, { "Price Break" : "low", "cost" : 10.82, "date" : "01" }
|
||||||
|
];
|
||||||
|
|
||||||
|
myChart.draw(1500);
|
||||||
|
|
||||||
|
// function addHorizontalLine(value, color) {
|
||||||
|
// svg
|
||||||
|
// .append("line")
|
||||||
|
// .attr("x1", myChart._xPixels())
|
||||||
|
// .attr("y1", s.y._scale(value))
|
||||||
|
// .attr("x2", myChart._xPixels() + myChart._widthPixels())
|
||||||
|
// .attr("y2", s.y._scale(avg))
|
||||||
|
// .style("stroke", color);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// addHorizontalLine(avg
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
barplot("body",dim,data);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -54,10 +54,10 @@
|
||||||
d.zField.join(" ").split(" ").join("_");
|
d.zField.join(" ").split(" ").join("_");
|
||||||
})
|
})
|
||||||
.attr("cx", function (d) {
|
.attr("cx", function (d) {
|
||||||
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
|
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("cy", function (d) {
|
.attr("cy", function (d) {
|
||||||
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
|
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
|
|
|
@ -15,13 +15,17 @@
|
||||||
// the first aggField defines the points and the others define the line
|
// the first aggField defines the points and the others define the line
|
||||||
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
lineCoords = d3.svg.line()
|
updateCoords = d3.svg.line()
|
||||||
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
|
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
|
||||||
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
|
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
entryExitCoords = d3.svg.line()
|
entryCoords = d3.svg.line()
|
||||||
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
|
||||||
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
|
||||||
|
// Build the point calculator
|
||||||
|
exitCoords = d3.svg.line()
|
||||||
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
|
||||||
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
|
||||||
graded = false,
|
graded = false,
|
||||||
i,
|
i,
|
||||||
k,
|
k,
|
||||||
|
@ -116,8 +120,8 @@
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.key; })
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("fill", "white")
|
.attr("fill", "white")
|
||||||
.attr("stroke", "none");
|
.attr("stroke", "none");
|
||||||
|
@ -130,6 +134,8 @@
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markerBacks.exit(), duration)
|
rem = addTransition(markerBacks.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -171,8 +177,8 @@
|
||||||
.on("mouseleave", function (e) {
|
.on("mouseleave", function (e) {
|
||||||
self.leaveEventHandler(e, this, chart, series);
|
self.leaveEventHandler(e, this, chart, series);
|
||||||
})
|
})
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
||||||
.call(function () {
|
.call(function () {
|
||||||
|
@ -202,6 +208,8 @@
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markers.exit(), duration)
|
rem = addTransition(markers.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -274,9 +282,11 @@
|
||||||
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
||||||
}
|
}
|
||||||
// Get the points that this line will appear
|
// Get the points that this line will appear
|
||||||
lineData[i].entryExit = entryExitCoords(lineData[i].data);
|
lineData[i].entry = entryCoords(lineData[i].data);
|
||||||
// Get the actual points of the line
|
// Get the actual points of the line
|
||||||
lineData[i].line = lineCoords(lineData[i].data);
|
lineData[i].update = updateCoords(lineData[i].data);
|
||||||
|
// Get the actual points of the line
|
||||||
|
lineData[i].exit = exitCoords(lineData[i].data);
|
||||||
// Add the color in this loop, it can't be done during initialisation of the row becase
|
// Add the color in this loop, it can't be done during initialisation of the row becase
|
||||||
// the lines should be ordered first (to ensure standard distribution of colors
|
// the lines should be ordered first (to ensure standard distribution of colors
|
||||||
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
||||||
|
@ -301,7 +311,7 @@
|
||||||
return className + " dmp-line " + d.keyString;
|
return className + " dmp-line " + d.keyString;
|
||||||
})
|
})
|
||||||
.attr("d", function (d) {
|
.attr("d", function (d) {
|
||||||
return d.entryExit;
|
return d.entry;
|
||||||
})
|
})
|
||||||
.call(function () {
|
.call(function () {
|
||||||
// Apply formats optionally
|
// Apply formats optionally
|
||||||
|
@ -317,13 +327,13 @@
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.update; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
.attr("d", function (d) { return d.entryExit; })
|
.attr("d", function (d) { return d.exit; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
|
|
|
@ -3365,10 +3365,10 @@ var dimple = {
|
||||||
d.zField.join(" ").split(" ").join("_");
|
d.zField.join(" ").split(" ").join("_");
|
||||||
})
|
})
|
||||||
.attr("cx", function (d) {
|
.attr("cx", function (d) {
|
||||||
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
|
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("cy", function (d) {
|
.attr("cy", function (d) {
|
||||||
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin);
|
return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin);
|
||||||
})
|
})
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||||
|
@ -3679,13 +3679,17 @@ var dimple = {
|
||||||
// the first aggField defines the points and the others define the line
|
// the first aggField defines the points and the others define the line
|
||||||
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
firstAgg = (series.x._hasCategories() || series.y._hasCategories() ? 0 : 1),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
lineCoords = d3.svg.line()
|
updateCoords = d3.svg.line()
|
||||||
.x(function (d) { return dimple._helpers.cx(d, chart, series); })
|
.x(function (d) { return (dimple._helpers.cx(d, chart, series)).toFixed(2); })
|
||||||
.y(function (d) { return dimple._helpers.cy(d, chart, series); }),
|
.y(function (d) { return (dimple._helpers.cy(d, chart, series)).toFixed(2); }),
|
||||||
// Build the point calculator
|
// Build the point calculator
|
||||||
entryExitCoords = d3.svg.line()
|
entryCoords = d3.svg.line()
|
||||||
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin); })
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin).toFixed(2); })
|
||||||
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin); }),
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._previousOrigin).toFixed(2); }),
|
||||||
|
// Build the point calculator
|
||||||
|
exitCoords = d3.svg.line()
|
||||||
|
.x(function (d) { return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin).toFixed(2); })
|
||||||
|
.y(function (d) { return (series.y._hasCategories() ? dimple._helpers.cy(d, chart, series) : series.y._origin).toFixed(2); }),
|
||||||
graded = false,
|
graded = false,
|
||||||
i,
|
i,
|
||||||
k,
|
k,
|
||||||
|
@ -3780,8 +3784,8 @@ var dimple = {
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("id", function (d) { return d.key; })
|
.attr("id", function (d) { return d.key; })
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("fill", "white")
|
.attr("fill", "white")
|
||||||
.attr("stroke", "none");
|
.attr("stroke", "none");
|
||||||
|
@ -3794,6 +3798,8 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markerBacks.exit(), duration)
|
rem = addTransition(markerBacks.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -3835,8 +3841,8 @@ var dimple = {
|
||||||
.on("mouseleave", function (e) {
|
.on("mouseleave", function (e) {
|
||||||
self.leaveEventHandler(e, this, chart, series);
|
self.leaveEventHandler(e, this, chart, series);
|
||||||
})
|
})
|
||||||
.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._previousOrigin); })
|
||||||
.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._previousOrigin); })
|
||||||
.attr("r", 0)
|
.attr("r", 0)
|
||||||
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
.attr("opacity", (series.lineMarkers || lineDataRow.data.length < 2 ? lineDataRow.color.opacity : 0))
|
||||||
.call(function () {
|
.call(function () {
|
||||||
|
@ -3866,6 +3872,8 @@ var dimple = {
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
rem = addTransition(markers.exit(), duration)
|
rem = addTransition(markers.exit(), duration)
|
||||||
|
.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("r", 0);
|
||||||
|
|
||||||
// Run after transition methods
|
// Run after transition methods
|
||||||
|
@ -3938,9 +3946,11 @@ var dimple = {
|
||||||
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
dimple._addGradient(lineData[i].key, "fill-line-gradient-" + lineData[i].keyString, (series.x._hasCategories() ? series.x : series.y), data, chart, duration, "fill");
|
||||||
}
|
}
|
||||||
// Get the points that this line will appear
|
// Get the points that this line will appear
|
||||||
lineData[i].entryExit = entryExitCoords(lineData[i].data);
|
lineData[i].entry = entryCoords(lineData[i].data);
|
||||||
// Get the actual points of the line
|
// Get the actual points of the line
|
||||||
lineData[i].line = lineCoords(lineData[i].data);
|
lineData[i].update = updateCoords(lineData[i].data);
|
||||||
|
// Get the actual points of the line
|
||||||
|
lineData[i].exit = exitCoords(lineData[i].data);
|
||||||
// Add the color in this loop, it can't be done during initialisation of the row becase
|
// Add the color in this loop, it can't be done during initialisation of the row becase
|
||||||
// the lines should be ordered first (to ensure standard distribution of colors
|
// the lines should be ordered first (to ensure standard distribution of colors
|
||||||
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All");
|
||||||
|
@ -3965,7 +3975,7 @@ var dimple = {
|
||||||
return className + " dmp-line " + d.keyString;
|
return className + " dmp-line " + d.keyString;
|
||||||
})
|
})
|
||||||
.attr("d", function (d) {
|
.attr("d", function (d) {
|
||||||
return d.entryExit;
|
return d.entry;
|
||||||
})
|
})
|
||||||
.call(function () {
|
.call(function () {
|
||||||
// Apply formats optionally
|
// Apply formats optionally
|
||||||
|
@ -3981,13 +3991,13 @@ var dimple = {
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
updated = addTransition(theseShapes, duration)
|
updated = addTransition(theseShapes, duration)
|
||||||
.attr("d", function (d) { return d.line; })
|
.attr("d", function (d) { return d.update; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
removed = addTransition(theseShapes.exit(), duration)
|
removed = addTransition(theseShapes.exit(), duration)
|
||||||
.attr("d", function (d) { return d.entryExit; })
|
.attr("d", function (d) { return d.exit; })
|
||||||
.each(drawMarkerBacks)
|
.each(drawMarkerBacks)
|
||||||
.each(drawMarkers);
|
.each(drawMarkers);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue