如何像d3一样在nvd3中添加画笔
how to add brush in nvd3 like d3
我正在 nvd3 中创建图表 FIDDLE
我已经完成了图形及其工作得很好但现在我想在其中添加 brush 就像 d3 看这个例子:http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e 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;
});
I wonder how can you add brush using 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;
}
我正在 nvd3 中创建图表 FIDDLE
我已经完成了图形及其工作得很好但现在我想在其中添加 brush 就像 d3 看这个例子:http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e 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;
});
I wonder how can you add brush using 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;
}