Liniendiagramm mit zwei Y-Achsen in dc.js

Ich habe ein zusammengesetztes Diagramm aus drei Liniendiagrammen. Eines der Diagramme verwendet, wie vorgeschlagen, eine "falsche" GruppeHier. Wie Sie im folgenden Schnappschuss sehen können, unterscheidet sich der Maßstab des dritten Diagramms stark von den beiden anderen. Die Lösung, die ich haben möchte, ist, ein Doppelachsendiagramm wie gezeigt zu habenhier in reinem d3. Ich denke, es kann mit einem .renderlet () auf dem Haupt-Composite-Chart gemacht werden, aber ich habe mich gefragt, ob es eine "sexier" Lösung mit reinen dc.js gibt.

Hier ist ein Schnappschuss:

und hier ist mein Code. (in Coffeescript) Ich habe versucht, .y und .yAxis in den internen Diagrammen zu verwenden, aber das hatte keine Auswirkungen.

    actualValuesChart = dc.lineChart(mainChart)
        .group(metric, "actual " + @displayName)
        .valueAccessor (d) -> d.value.avg
        .colors(['green'])
        .interpolate('basis-open')

    normValuesChart = dc.lineChart(mainChart)
        .group(metric, "normal " + @displayName)
        .valueAccessor (d) -> d.value.avg_avg
        .colors(['rgba(0,0,255,1)'])
        .interpolate('basis-open')

    clipsCountChart = dc.lineChart(mainChart)
        .group(buildFakeGroup(defaultClipsArray))
        .colors(['red'])
        .interpolate('basis-open')
        # .y(d3.scale.linear().range([100, 0]))
        # .yAxis(d3.svg.axis().scale(d3.scale.linear().range([100, 0])))

    mainChart
        .dimension(@dimension.monthStamp)
        .width(thisChart.width + 30)
        .height(thisChart.width*.333)
        .yAxisLabel(@displayName)
        .elasticY(true)
        .x(d3.time.scale().domain([minDate,maxDate]))
        .xUnits(d3.time.months)
        .brushOn(true)
        .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .compose([actualValuesChart,normValuesChart,clipsCountChart])

Antworten auf die Frage(1)

Ihre Antwort auf die Frage