我在nvd3 FIDDLE
中创建图表我完成了图表并且工作得很好但现在我想在其中添加刷,如 d3 ,请参阅此示例:http://bl.ocks.org/mbostock/1667367。但我搜索了每一个地方,我找到了一个解决方案,crossfilter但是可以使用像d3这样的画笔,而nvd3有任何画笔功能吗?请帮我。 的 的
的nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
的
答案 0 :(得分:2)
我想知道如何使用crossfilter添加画笔?
这里的任何方式都是解决方案
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
var brushC = d3.select('#chart svg g');
brushC.empty() ? brushC.append('g'): brushC.select('g')
.attr("class", "brush")
.call(d3.svg.brush()
.x(chart.xAxis.scale())
.on('brushend', onBrush)
.extent([0,0])
)
.selectAll('rect')
.attr('height',320 )//change according to you chart height
//i have hard coded it since it was a 'quick and dirty' fix
//you may try to get it from chart, if you can please update me.
;
}
nv.utils.windowResize(chart.update);
return chart;
});
onBrush功能
function onBrush() {
brushExtent = d3.event.target.extent();
console.log(brushExtent);
}
添加CSS
rect.extent{
color:grey;
opacity:0.4;
}