Is there any way to alter the order of rendering?

[Sofia Rodrigues]

Hello,

The fiddle I am posting is very similar to the previous one I linked (thank you for the help Gordon o/): https://jsfiddle.net/metheria/yrtz3d9x/6/

I merely added a few circles to test the rendering order of the svg items. Is there any way to bring the circles to the top? Or maybe alter a scatter plot so it would be styled in the same way as the circles? 

I did notice after drawing the circles that the trend line is also behind all the other plots :/

On that note, is it possible for scatter plots to have tips like line charts do?

Thank you for all the help! ><

[Gordon Woodhull]

Hi Sofia,

There are a few things going on here, but it's all about SVG layers (<g> elements).

Part of it is that you're using a composite chart, so there are actually three g.chart-body: the composite, the line, and the scatter. In that order.

So, if you put the scatter plot on top of the line chart by reversing the order of composition:

      .compose([ KpiLine, KpiScatter ])

And then select the chart-body of the scatter plot instead of the composite chart's chart-body:

        var chartBody = chart.select('._1 g.chart-body');

... you get the right ordering: https://jsfiddle.net/gordonwoodhull/2tb6pq47/3/

(Assuming you also want the trend line on top. If not, you could start a separate chart.select for it with the appropriate selector.)

For this example, I don't think you actually need to use a composite chart, because the line chart already supports showing dots on the data points, with .renderDataPoints():

https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#linechartrenderdatapointsoptions--object--linechart

Theres a PR I'm about to merge that adds simple tips on the scatter plot (the fancier option is d3.tip [1]):

https://github.com/dc-js/dc.js/pull/1200

It'll be in beta.33 - should be the last beta before the release of 2.0.

Cheers,

Gordon

[1] http://stackoverflow.com/questions/24664079/d3-tooltips-for-multiple-linked-dc-js-charts/24702554#24702554

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/e9bce2a6-e0b5-4fa8-99c2-d15220e793b2%40googlegroups.com.

[Sofia Rodrigues]

Hey Gordon,

Before I asked this question I did search for z-index and rendering order, but wasn't sure how to solve it so thanks!

I somehow missed the renderDataPoints() which is exactly what I need to replace my scatter plot. So I removed the composite chart :)

However, what I just don't get is how did I manage to break the circles...

https://jsfiddle.net/metheria/u4wrLnrv/5/

The line draws just fine, yet the circles are always null. I honestly don't get why >< They were working just fine in the composite chart when they were inside the scatter plot g element :/

[Gordon Woodhull]

Hi Sofia,

Right, there is no z-index property in SVG; it's just the element order. <g> elements help by grouping things. It's a lot like in drawing programs like Illustrator.

The difference you're running into is that the scatter plot was not using <circle> elements; it was using <path> elements (because it supports other symbols). So when you 

        var circles = chartBody.selectAll("circle")

          .data(jsonCircles)

          .enter()

it didn't find anything already there, so the enter() added your circles. With the line chart already using <circle> elements, it finds them already there and there is nothing to add - the enter() selection is empty.

The best way to deal with this is to always use a unique class for your annotations, to not get them confused with the elements in the dc.js chart.

So if you do:

        var circles = chartBody.selectAll("circle.annotate")

          .data(jsonCircles)

          .enter()

          .append("circle")

          .attr('class', 'annotate')

then d3 doesn't find any circles with class "annotate" and goes ahead and adds them, and the last line adds that marker class. dc.js also does uses unique class names internally, so it won't find yours and get confused either.]

One other pro tip - if you use .on("pretransition", ...) instead of "renderlet", the annotations will get displayed at the same time as the rest of the chart, without a delay. "pretransition" fires immediately after rendering or redrawing; "renderlet" fires after the chart runs animated transitions.

https://jsfiddle.net/gordonwoodhull/u4wrLnrv/8/

Cheers,

Gordon

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/a06f27c4-c543-49f9-a586-34d431799ebf%40googlegroups.com.

[Sofia Rodrigues]

Aaah didn't realize that would happen, thank you! Still very fresh to both d3 and dc ^^;