1

I find the underlayCallback option extremely useful in the dygraphs library. It allows the user to draw things "easily" that were not part of the original intent of the library. I have used it to add graphical annotations on time series charts for example.

Is there something equivalent within the dc.js framework ? Ideally something that would expose the (potentially filtered) data used to draw the chart when it refreshes.

Chapo
  • 2,563
  • 3
  • 30
  • 60
  • are you looking for something like this https://stackoverflow.com/questions/22392134/is-there-a-way-to-attach-callback-what-fires-whenever-a-crossfilter-dimension-fi – Abdulhaq Shah Oct 21 '19 at 05:21
  • not really unless I have access to the canvas of the graph within the filter event ? – Chapo Oct 21 '19 at 05:27

1 Answers1

1

You have several events that are triggered in various points of the graph life:

https://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on

What seems similar to underlayCallback is either the renderlet or the pretransition event. from the callback, you can do pretty much everything, like rotating the axe labels, tracking new click events, adding new svg elements...

There is an example here of drawing an extra line:

.on('renderlet', function(chart) {
    var left_y = 10, right_y = 70; // use real statistics here!
    var extra_data = [{x: chart.x().range()[0], y: chart.y()(left_y)}, {x: chart.x().range()[1], y: chart.y()(right_y)}];
    var line = d3.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .curve(d3.curveLinear);
    var chartBody = chart.select('g.chart-body');
    var path = chartBody.selectAll('path.extra').data([extra_data]);
    path = path
        .enter()
            .append('path')
            .attr('class', 'extra')
            .attr('stroke', 'red')
            .attr('id', 'extra-line')
        .merge(path);
    path.attr('d', line);
Xavier
  • 1,157
  • 9
  • 29
  • It does indeed look like what I would need. Do you happen to have an example where one would draw a simple shape on the graph within the `renderlet` event ? Is there a simple way to convert "real-life" data into canvas coordinates in `dc.js` ? – Chapo Oct 21 '19 at 06:46
  • hey, it's not a canvas, it's svg, fairly easy coordinates ;) – Xavier Oct 21 '19 at 06:53
  • I usually recommend the `pretransition` event because it fires before any transitions. As for examples, here is [a row chart with a vertical line added](https://dc-js.github.io/dc.js/examples/row-vertical-line.html), here is [a contour map displayed behind a scatter plot](https://dc-js.github.io/dc.js/examples/background-drawing.html), [a vertical limit line added on click](https://dc-js.github.io/dc.js/examples/click-limit-on-histogram.html) - grep the examples for others. – Gordon Oct 21 '19 at 11:19
  • Note the lines in @Xavier's answer that apply `chart.y()` to the values - that's the d3 scale in action, transforming data coords to SVG coords. This example happens to use the X scale range instead of transforming X coordinates, but it's the same idea and some of the other examples show that. – Gordon Oct 21 '19 at 13:53
  • very useful thanks. I'll get to work on my `d3` syntax now ! – Chapo Oct 22 '19 at 06:41