如何在d3之类的nvd3中添加画笔 [英] how to add brush in nvd3 like d3

问题描述

我正在nvd3中创建图 FIDDLE

I am creating graph in nvd3 FIDDLE

我已经完成了图形，并且可以很好地工作，但是现在我想像其中的 d3 那样添加画笔，请参见以下示例: crossfilter ，但是有可能使用d3和nvd3有刷功能吗?请帮我.

I am done with graph and its working nicely but now I want to add brush in it like d3 see this example: http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e crossfilter but is it possible to use brush like d3 and nvd3 has any brush function ? please help me.

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;
}

这篇关于如何在d3之类的nvd3中添加画笔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！