Динамическое масштабирование и сглаживание составных графиков dc js
У меня есть составной график с использованием DC JS (линейная и линейчатая диаграмма)
Тем не менее, масштабы не изменяются динамически, как в случае использования единичных линейных / линейных графиков постоянного тока.
Я сделал 5 тиков для оси Y(вторичной и основной) для ясности, но я хочу, чтобы шкалы и интервалы тиков оси Y динамически изменялись в зависимости от рассчитанных значений.
Код:
//Composite chart to show 2 metrics
chart3
.width(500) // (optional) define chart width, :default = 200
.height(200) // (optional) define chart height, :default = 200
.transitionDuration(500) // (optional) define chart transition duration, :default = 500
// (optional) define margins
.margins({top: 30, right: 50, bottom: 30, left: 40})
.dimension(dateDimension) // set dimension
//.group(rechfreqGroup) // set group
// (optional) whether chart should rescale y axis to fit data, :default = false
.elasticY(true)
// (optional) when elasticY is on whether padding should be applied to y axis domain, :default=0
.yAxisPadding(100)
// (optional) whether chart should rescale x axis to fit data, :default = false
//.elasticX(true)
// (optional) when elasticX is on whether padding should be applied to x axis domain, :default=0
.xAxisPadding(500)
// define x scale
.x(d3.scale.ordinal().domain(["DURING","POST1"]))
.xUnits(dc.units.ordinal)
//.renderHorizontalGridLines(true)
//.renderVerticalGridLines(true)
.legend(dc.legend().x(200).y(5).itemHeight(10).gap(3))
.title(function(d) { return "Revenue : " + d3.round(d.value.rechtotal/d.value.new_count,2) + " Frequency : " +
d3.round(d.value.rechfreq/d.value.new_count,2) ; })
.yAxisLabel("Revenue (in $)")
.rightYAxisLabel("Frequency")
.brushOn(false)
// compose sub charts, currently composite chart only supports line chart & bar chart
._rangeBandPadding(1) //workaround to fix visual stuff (dc js issues)
.compose([
dc.barChart(chart3).group(rechrevGroup,"Average Revenue").gap(10).centerBar(true).xUnits(function(){return 10;}).valueAccessor(function (p) {
return (p.value.rechtotal / p.value.new_count) ;
//return p.value.count > 0 ? p.value.rechtotal / p.value.new_count : 0;
}),
// you can even include stacked bar chart or line chart in a composite chart
dc.lineChart(chart3).group(rechfreqGroup,"Average Frequency").brushOn(false).useRightYAxis(true).colors('#000000').valueAccessor(function (p) {
return (p.value.rechfreq / p.value.new_count) ;
})
])
.yAxis().ticks(5);
chart3.rightYAxis().ticks(5);
Можно ли сделать масштабирование динамическим (ось Y здесь) в соответствии с рассчитанными значениями? Если нет, могу ли я хотя бы установить tickValues и т. Д.?
Любой подход / предложения по динамическому масштабированию и / или альтернативам будут высоко оценены
ОБНОВИТЬ
Создал скрипку с моим точно таким же кодом здесь
2 проблемы с этим:
- Динамическое масштабирование диаграммы отлично работает с / без эластичности Y(true) в этой скрипке. (Однако в моем коде и диаграммах на панели инструментов, которую я строю, не работает!) Почему это происходит? Я что-то упускаю / делаю что-то принципиально не здесь?
- brushOn (false) не работает, полосы активируются по клику, и они выбираются в скрипте (в моем проекте они выделяются, и соответственно фильтруется перекрестный фильтр всех остальных графиков). Как отключить выделение? Или перекрестная фильтрация для конкретного графика?
Дайте мне знать, если у вас есть какие-либо решения / подход для решения этих проблем