diff --git a/src/marks/facet.js b/src/marks/facet.js index 86694062e9..182236e5e9 100644 --- a/src/marks/facet.js +++ b/src/marks/facet.js @@ -64,13 +64,19 @@ class Facet extends Mark { .each(function(key) { const {markIndex, markChannels} = facets.get(key); for (const mark of marks) { + const index = markIndex.get(mark); + const channels = markChannels.get(mark); + const dimensions = subdimensions; const node = mark.render( - markIndex.get(mark), + index, scales, - markChannels.get(mark), - subdimensions + channels, + dimensions ); if (node != null) this.appendChild(node); + if (mark.callback) { + mark.callback(node, index, scales, channels, dimensions); + } } })) .node(); diff --git a/src/plot.js b/src/plot.js index 7efd3cafe8..0ecc5d43d8 100644 --- a/src/plot.js +++ b/src/plot.js @@ -110,6 +110,9 @@ export function plot(options = {}) { const index = markIndex.get(mark); const node = mark.render(index, scales, channels, options); if (node != null) svg.append(() => node); + if (mark.callback) { + mark.callback(node, index, scales, channels, dimensions); + } } return svg.node(); diff --git a/test/ballot-status-race.html b/test/ballot-status-race.html index 97a1123e2d..8a1e5b1d49 100644 --- a/test/ballot-status-race.html +++ b/test/ballot-status-race.html @@ -81,8 +81,19 @@ y: "race" }, marks: [ - Plot.barX(rollup, {x: "percent", y: "status", fill: "status", title: d => `${d.percent.toFixed(1)}%`}), - Plot.ruleX([0]) + Object.assign(Plot.barX(rollup, {x: "percent", y: "status", fill: "status", title: d => `${d.percent.toFixed(1)}%`}), + { + // callback: (node) => d3.select(node).selectAll("rect").attr("opacity", 0).transition().attr("opacity", 1) + callback: (node) => d3.select(node).selectAll("rect").attr("width", function() { + this.setAttribute("__w", this.getAttribute("width")) + return 0; + }).transition().attr("width", function() { + const w = this.getAttribute("__w"); + this.removeAttribute("__w"); + return w; + }) + }), + Object.assign(Plot.ruleX([0]), { callback: (node) => node.style.strokeDasharray = "2 2" }) ] })); });