如何在nvd3中添加画笔，比如d3

how to add brush in nvd3 like d3

本文关键字：画笔 比如 d3 添加 nvd3      更新时间：2023-09-26

我在nvd3中创建图形

我完成了图形，它的工作很好，但现在我想添加画笔在它像d3见这个例子:http://bl.ocks.org/mbostock/1667367。但我搜索了每一个地方，我找到了一个解决方案，即交叉过滤器，但是否有可能使用画笔像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;
});

我想知道如何使用交叉滤镜添加画笔?

无论如何这就是解决方法

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;
}
相关文章：