Scatter Plot in Composite Chart produces invalid translate values

[LorenzGardner]

Using 2.0 Beta 5

Error: Invalid value for attribute transform="translate(NaN,NaN)"
d3.min.js:1 o
d3.min.js:3 (anonymous function)
d3.min.js:1 Y
d3.min.js:3 _a.each
d3.min.js:3 _a.attr
dc.js:7447 dc.scatterPlot._chart.plotData
dc.js:5850 dc.compositeChart._chart.plotData
dc.js:2938 drawChart
dc.js:2914 dc.coordinateGridMixin._chart._doRender
dc.js:1101 dc.baseMixin._chart.render
dc.js:172 dc.renderAll

my scatter plot def:

dc.scatterPlot(theChart)
.group(tempGroup, "Temp (°C)")
.ordinalColors([tempColor]);

My chart def

var theChart = dc.compositeChart("#theChart")
theChart
.width(1180)
.height(420)
.dimension(timeDim)
.x(d3.time.scale().domain([startTime, endTime]))
.y(d3.scale.linear().domain([0,1]))
.xUnits(d3.time.second)
.brushOn(false)
.margins({top: 10, right: chartRightMargin, bottom: 30, left: chartLeftMargin})
.compose([lineA, lineB, tempLine, lineD])
.legend(dc.legend().x(1100).y(10))
.mouseZoomable(false)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.xAxis();

The _locator function access coordinateGridMixin keyAccessor() an valueAccessor() to get the x and y translate, those appear to be coming back NaN. Is this coordinateGridMixin not valid for a scatter plot?

Possibly related to #702

[LorenzGardner]

Note commenting out the lines:

_chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; });
_chart.valueAccessor(function (d) { return originalKeyAccessor(d)[1]; });

seems to solve the issue, without causing problems (at least in my case).

[gordonwoodhull]

Aha, nice find. I agree this is a consequence of the suspicious behavior described in #702.

Can you also work around it by setting the keyAccessor and valueAccessor to something reasonable?

Love the idea of just removing the bad code, but I think this code is currently what makes the composite keys work. #621 is also related. For better or worse, I think there is a bigger question of a key should look like.

[LorenzGardner]

Yes leaving the dc.js file unmodified, and setting the keyAccessor and valueAccessor overrides works.

function keyAcc(d) { return d.key; };
function valAcc(d) { return d.value; };

var tempLine = dc.scatterPlot(theChart)
.group(tempGroup, "Temp (°C)")
.ordinalColors([tempColor])
.keyAccessor(keyAcc)
.valueAccessor(valAcc)

[nhofmeester]

I'm struggling to get the coloring to work without it messing up the selection in the scatter graph. Could you point out in this fiddle what I need to do to get both working at the same time? I tried to specify the 'default' accessor functions for key and value but the moment I add a third item to the dimension used for the scatterplot, selecting anything in the scatterplot results in emptying the other graphs. (http://jsfiddle.net/za8ksj45/8/).

[gordonwoodhull]

@nhofmeester, I think I answered your (unrelated) question on SO.

To keep everything all happily cross-linked:
http://stackoverflow.com/questions/28944326/assigning-color-to-dc-js-scatter-plot-interferes-with-selection-in-the-graph