过去几周我一直在使用dc.js,但有一个问题我似乎无法弄明白。
我希望能够使用画笔滤镜更改基于单个图表的四个不同图表的比例。有点像:
priorityTotChart
.width(2*w/3).height(h/3)
.margins({top: 10, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.group(priorityTotal)
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([minDate,maxDate]))
.elasticY(true)
.brushOn(true);
var translate = 3;
priority1Chart.width(w/3)
.height(h/6)
.transitionDuration(300)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.group(priority1)
.mouseZoomable(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.elasticY(true)
.brushOn(false)
.ordinalColors(["red"])
.rangeChart(priorityTotChart)
.yAxisLabel("Hits per day")
.renderArea(true)
.renderlet(function (chart) {
chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});
priority2Chart.width(w/3)
.height(h/6)
.transitionDuration(300)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.group(priority2)
.mouseZoomable(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.elasticY(true)
.brushOn(false)
.ordinalColors(["orange"])
.rangeChart(priorityTotChart)
.yAxisLabel("Hits per day")
.renderArea(true)
.renderlet(function (chart) {
chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});
priority3Chart.width(w/3)
.height(h/6)
.transitionDuration(300)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.group(priority3)
.mouseZoomable(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.elasticY(true)
.brushOn(false)
.ordinalColors(["blue"])
.rangeChart(priorityTotChart)
.yAxisLabel("Hits per day")
.renderArea(true)
.renderlet(function (chart) {
chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});
priority4Chart.width(w/3)
.height(h/6)
.transitionDuration(300)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.group(priority4)
.mouseZoomable(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.elasticY(true)
.brushOn(false)
.ordinalColors(["green"])
.rangeChart(priorityTotChart)
.yAxisLabel("Hits per day")
.renderArea(true)
.renderlet(function (chart) {
chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});
但是,这种方法似乎不起作用,因为只会更新使用.rangeChart(priorityTotChart)
的最后一个图表。
我可以通过使每个图形依赖于前一个图形的范围来解决这个问题,即priority1Chart具有.rangeChart(priorityTotChart)
,而priority2Chart具有.rangeChart(priority1Chart)
等,但是这种方法非常慢。所以我希望有更好的方法来达到同样的效果?
提前致谢!
答案 0 :(得分:4)
提出问题的另一种方式是,"如何将多个焦点图表附加到单个范围图表?"
(至少,如果你只关心刷范围图表来缩放焦点图表,而不是相反。)
鉴于这个新问题,请看一下coordinateGridMixin.focusChart的实现:
_chart.focusChart = function (c) {
if (!arguments.length) {
return _focusChart;
}
_focusChart = c;
_chart.on('filtered', function (chart) {
if (!chart.filter()) {
dc.events.trigger(function () {
_focusChart.x().domain(_focusChart.xOriginalDomain());
});
} else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
dc.events.trigger(function () {
_focusChart.focus(chart.filter());
});
}
});
return _chart;
};
我们需要做的就是制作一个带有多个焦点图表的新功能版本。由于此功能无法访问任何内部数据,因此我们可以“修补”#34;用于添加功能的任何坐标网格图:
chart1.focusCharts = function (chartlist) {
if (!arguments.length) {
return this._focusCharts;
}
this._focusCharts = chartlist; // only needed to support the getter above
this.on('filtered', function (range_chart) {
if (!range_chart.filter()) {
dc.events.trigger(function () {
chartlist.forEach(function(focus_chart) {
focus_chart.x().domain(focus_chart.xOriginalDomain());
});
});
} else chartlist.forEach(function(focus_chart) {
if (!rangesEqual(range_chart.filter(), focus_chart.filter())) {
dc.events.trigger(function () {
focus_chart.focus(range_chart.filter());
});
}
});
});
return this;
};
我们还需要从coordinateGridMixin中复制rangesEqual辅助函数,以使其正常工作。
我创建了一个示例并将其添加到dc.js示例中:
http://dc-js.github.io/dc.js/examples/multi-focus.html
您可以在此处查看来源:
https://github.com/dc-js/dc.js/blob/master/web/examples/multi-focus.html
本机支持这很好,包括相反的情况缩放 - >过滤器,需要更改dc.js内部。我添加了一个问题来跟踪这个想法:https://github.com/dc-js/dc.js/issues/820
答案 1 :(得分:2)
范围图表适用于焦点图表的.x() - 比例。
您可以做的是全局定义一个比例,并将其用于应由范围图表控制的每个图表。只有一个焦点图表必须设置.rangeChart()属性。
这是未定义的行为我认为这意味着将来可能会发生变化。
伪代码:
var xScale = d3.scale.linear();
var xScaleRange = d3.scale.linear();
var rangeChart = dc.lineChart('#R').x(xScaleRange).[...];
var focusChartA = dc.barChart('#A').x(xScale).rangeChart(rangeChart).[...];
var focusChartB = dc.barChart('#B').x(xScale).[...];