WIP

demo/demo.js

@@ -43,10 +43,7 @@ const randomizeData = () => {
         })),
     }));
 
-    d3
-        .select('#eventdrops-demo')
-        .data([data])
-        .call(chart);
+    d3.select('#eventdrops-demo').call(chart.draw([data]));
 };
 
 document
@@ -62,10 +59,15 @@ const tooltip = d3
 
 const chart = eventDrops({
     d3,
+    metaballs: false,
     zoom: {
-        onZoomEnd: () => updateCommitsInformation(chart),
+        // onZoomEnd: () => updateCommitsInformation(chart),
+    },
+    line: {
+        key: d => d.name,
     },
     drop: {
+        key: d => d.date,
         date: d => new Date(d.date),
         onMouseOver: commit => {
             tooltip

src/axis.js

@@ -35,23 +35,18 @@ export const tickFormat = (date, formats, d3) => {
 export default (d3, config, xScale) => {
     const { label: { width: labelWidth }, axis: { formats }, locale } = config;
     d3.timeFormatDefaultLocale(locale);
-    return selection => {
-        const axis = selection.selectAll('.axis').data(d => d);
 
-        axis.exit().remove();
+    const axisTop = d3
+        .axisTop(xScale)
+        .tickFormat(d => tickFormat(d, formats, d3));
 
-        const axisTop = d3
-            .axisTop(xScale)
-            .tickFormat(d => tickFormat(d, formats, d3));
+    return function(viewport) {
+        viewport.selectAll('.axis').remove();
 
-        axis
-            .enter()
-            .filter((_, i) => !i)
+        viewport
             .append('g')
             .classed('axis', true)
             .attr('transform', `translate(${labelWidth},0)`)
             .call(axisTop);
-
-        axis.call(axisTop);
     };
 };

src/bounds.js

@@ -1,44 +1,42 @@
-export default (config, xScale) => selection => {
+export default (config, xScale) => {
     const {
+        d3,
         margin,
         bound: { format: dateFormat },
         label: { width: labelWidth },
         line: { height: lineHeight },
     } = config;
 
-    const bounds = selection.selectAll('.bound').data(d => d);
-    const numberRows = selection.data()[0].length;
+    return function(viewport) {
+        console.log(viewport.data());
+        const numberRows = viewport.data()[0].length;
 
-    bounds.exit().remove();
+        viewport.selectAll('.bound').remove();
 
-    bounds
-        .enter()
-        .filter((_, i) => !i)
-        .append('g')
-        .classed('bound', true)
-        .classed('start', true)
-        .attr(
-            'transform',
-            `translate(${labelWidth}, ${lineHeight * numberRows + margin.top})`
-        )
-        .append('text')
-        .text(dateFormat(xScale.domain()[0]));
+        viewport
+            .append('g')
+            .classed('bound', true)
+            .classed('start', true)
+            .attr(
+                'transform',
+                `translate(${labelWidth}, ${lineHeight * numberRows +
+                    margin.top})`
+            )
+            .append('text')
+            .text(dateFormat(xScale.domain()[0]));
 
-    bounds
-        .enter()
-        .filter((_, i) => !i)
-        .append('g')
-        .classed('bound', true)
-        .classed('end', true)
-        .attr(
-            'transform',
-            `translate(${labelWidth}, ${lineHeight * numberRows + margin.top})`
-        )
-        .append('text')
-        .attr('x', xScale.range()[1] - margin.right)
-        .attr('text-anchor', 'end')
-        .text(dateFormat(xScale.domain()[1]));
-
-    bounds.selectAll('.bound.start text').text(dateFormat(xScale.domain()[0]));
-    bounds.selectAll('.bound.end text').text(dateFormat(xScale.domain()[1]));
+        viewport
+            .append('g')
+            .classed('bound', true)
+            .classed('end', true)
+            .attr(
+                'transform',
+                `translate(${labelWidth}, ${lineHeight * numberRows +
+                    margin.top})`
+            )
+            .append('text')
+            .attr('x', xScale.range()[1] - margin.right)
+            .attr('text-anchor', 'end')
+            .text(dateFormat(xScale.domain()[1]));
+    };
 };

src/config.js

@@ -1,6 +1,7 @@
 import enLocale from 'd3-time-format/locale/en-US.json';
 
 export default d3 => ({
+    d3,
     locale: enLocale,
     metaballs: {
         blurDeviation: 10,
@@ -29,13 +30,15 @@ export default d3 => ({
         onClick: () => {},
         onMouseOver: () => {},
         onMouseOut: () => {},
+        key: d => d.id,
     },
     label: {
         padding: 20,
         text: d => `${d.name} (${d.data.length})`,
         width: 200,
     },
     line: {
+        key: d => d.id,
         color: (_, index) => d3.schemeCategory10[index],
         height: 40,
     },

src/dropLine.js

@@ -1,19 +1,22 @@
-import drop from './drop';
+import { lineSeparatorFactory } from './lines/lineSeparator';
+import { labelFactory } from './lines/label';
+import { dropsAreaFactory } from './lines/dropsArea';
 
 export default (config, xScale) => {
     const {
         metaballs,
         label: { text: labelText, padding: labelPadding, width: labelWidth },
-        line: { color: lineColor, height: lineHeight },
+        line: { color: lineColor, height: lineHeight, key: lineKey },
     } = config;
 
-    return function(selection) {
-        const lines = selection.selectAll('.drop-line').data(d => d);
+    return function(viewport) {
+        const lines = viewport.selectAll('.drop-line').data(d => d);
 
         lines.exit().remove();
 
-        const g = lines
-            .enter()
+        const enteringLines = lines.enter();
+
+        const enteringDropLine = enteringLines
             .append('g')
             .classed('drop-line', true)
             .attr('fill', lineColor)
@@ -24,26 +27,10 @@ export default (config, xScale) => {
                         lineHeight / 2})`
             );
 
-        g
-            .append('line')
-            .classed('line-separator', true)
-            .attr('x1', labelWidth)
-            .attr('x2', '100%')
-            .attr('y1', () => lineHeight)
-            .attr('y2', () => lineHeight);
-
-        g
-            .append('text')
-            .attr('x', labelWidth - labelPadding)
-            .attr('y', lineHeight / 2)
-            .attr('dy', '0.25em')
-            .attr('text-anchor', 'end')
-            .text(labelText);
-
-        // if (metaballs) {
-        //     drops.style('filter', 'url(#metaballs)');
-        // }
-
-        lines.call(drop(config, xScale));
+        enteringDropLine
+            .merge(lines)
+            .each(lineSeparatorFactory(config))
+            .each(labelFactory(config))
+            .call(dropsAreaFactory(config, xScale));
     };
 };

src/index.js

@@ -11,27 +11,27 @@ import './style.css';
 import { withinRange } from './withinRange';
 import { selection } from 'd3/build/d3';
 
-const getEvent = () => d3.event; // keep d3.event mutable see https://github.com/d3/d3/issues/2733
-
 // do not export anything else here to keep window.eventDrops as a function
 export default ({ d3 = window.d3, ...customConfiguration }) => {
     const config = defaultsDeep(
         customConfiguration || {},
         defaultConfiguration(d3)
     );
 
-    const chart = selection => {
-        const {
-            drops,
-            zoom: zoomConfig,
-            drop: { onClick, onMouseOut, onMouseOver },
-            metaballs,
-            label: { width: labelWidth },
-            line: { height: lineHeight },
-            range: { start: rangeStart, end: rangeEnd },
-            margin,
-        } = config;
+    const getEvent = () => d3.event; // keep d3.event mutable see https://github.com/d3/d3/issues/2733
+
+    const {
+        drops,
+        zoom: zoomConfig,
+        drop: { onClick, onMouseOut, onMouseOver },
+        metaballs,
+        label: { width: labelWidth },
+        line: { height: lineHeight },
+        range: { start: rangeStart, end: rangeEnd },
+        margin,
+    } = config;
 
+    const chart = selection => {
         // Follow margins conventions (https://bl.ocks.org/mbostock/3019563)
         const width = selection.node().clientWidth - margin.left - margin.right;
 
@@ -40,33 +40,45 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
             .domain([rangeStart, rangeEnd])
             .range([0, width - labelWidth]);
 
-        chart._scale = xScale;
-
-        const svg = selection.selectAll('svg').data(selection.data());
-
-        svg.exit().remove();
-
-        svg
-            .enter()
-            .append('svg')
-            .attr('width', width)
-            .classed('event-drop-chart', true)
-            .merge(svg)
-            .attr(
-                'height',
-                d => (d.length + 1) * lineHeight + margin.top + margin.bottom
-            )
-            .call(dropLine(config, xScale));
-
-        // @TODO: add back viewport
-
-        // if (zoomConfig) {
-        //     svg.call(zoom(d3, svg, config, xScale, draw, getEvent));
-        // }
-
-        // if (metaballs) {
-        //     svg.call(addMetaballsDefs(config));
-        // }
+        const draw = data => selection => {
+            const svg = selection.selectAll('svg').data(data);
+
+            svg.exit().remove();
+
+            const enteringSvg = svg
+                .enter()
+                .append('svg')
+                .attr('width', width)
+                .attr(
+                    'height',
+                    d =>
+                        (d.length + 1) * lineHeight + margin.top + margin.bottom
+                )
+                .classed('event-drop-chart', true);
+
+            const enteringViewport = enteringSvg
+                .append('g')
+                .classed('viewport', true)
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            enteringViewport
+                .merge(svg.selectAll('.viewport'))
+                .call(dropLine(config, xScale))
+                .call(axis(d3, config, xScale))
+                .call(bounds(config, xScale));
+
+            // if (zoomConfig) {
+            //     selection.call(zoom(d3, config, xScale, draw, getEvent));
+            // }
+
+            // if (metaballs) {
+            //     svg.call(addMetaballsDefs(config));
+            // }
+        };
+
+        chart.draw = draw;
+
+        draw(selection.data())(selection);
     };
 
     // chart.scale = () => chart._scale;
@@ -104,11 +116,8 @@ export default ({ d3 = window.d3, ...customConfiguration }) => {
     //     // selection
     //     //     .data(filteredData)
     //     //     .call(dropLine(config, scale))
-    //     //     .call(bounds(config, scale))
-    //     //     .call(axis(d3, config, scale));
-    // };
 
-    // chart.draw = selection => draw(config, chart._scale)(selection);
+    // };
 
     return chart;
 };

src/lines/dropsArea.js

@@ -0,0 +1,29 @@
+import drop from '../drop';
+
+export const dropsAreaFactory = (config, xScale) => {
+    const {
+        d3,
+        label: { width: labelWidth },
+        line: { height: lineHeight },
+        metaballs,
+    } = config;
+
+    return function(selection) {
+        console.log(selection);
+        // const line = d3.select(this);
+        // line.select('.drops').remove();
+
+        // const drops = line
+        //     .append('g')
+        //     .classed('drops', true)
+        //     .attr(
+        //         'transform',
+        //         () => `translate(${labelWidth}, ${lineHeight / 2})`
+        //     )
+        //     .call(drop(config, xScale));
+
+        // if (metaballs) {
+        //     drops.style('filter', 'url(#metaballs)');
+        // }
+    };
+};

src/lines/label.js

@@ -0,0 +1,21 @@
+export const labelFactory = config => {
+    const {
+        d3,
+        label: { width: labelWidth, padding: labelPadding, text: labelText },
+        line: { height: lineHeight },
+    } = config;
+
+    return function() {
+        const line = d3.select(this);
+        line.select('.label').remove();
+
+        line
+            .append('text')
+            .classed('label', true)
+            .attr('x', labelWidth - labelPadding)
+            .attr('y', lineHeight / 2)
+            .attr('dy', '0.25em')
+            .attr('text-anchor', 'end')
+            .text(labelText);
+    };
+};