NVD3のフォーカスチャートの背景色を変更します

Question

NVD3のlineWithFocusChartのフォーカスバーの背景を変更することができるかどうかを知っていますか？

Answer 1

NVD3がD3に基づいて構築されているので、あなたはフォーカスバーの背景を構成する長方形を選択し、自分のスタイルを変更するにはD3の機能を使用することができます。

d3.selectAll(".nv-brushBackground").selectAll("rect") // select the rectangles in the background group(s) 
    .style("fill","steelblue") // style as desired 
    .style("opacity",0.8); 

nv.addGraph(function() { 
 
var chart = nv.models.lineWithFocusChart(); 
 
    chart.brushExtent([50,70]); 
 
    chart.xAxis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1"); 
 
    chart.x2Axis.tickFormat(d3.format(',f')); 
 
    chart.yTickFormat(d3.format(',.2f')); 
 
    chart.useInteractiveGuideline(true); 
 
    d3.select('#chart svg') 
 
    .datum(testData()) 
 
    .call(chart); 
 
    nv.utils.windowResize(chart.update); 
 
\t \t 
 
\t d3.selectAll(".nv-brushBackground").selectAll("rect") 
 
\t \t .style("fill","steelblue") 
 
\t \t .style("opacity",0.8); 
 
    
 
    return chart; 
 
}); 
 
    
 
function testData() { 
 
    return stream_layers(3,128,.1).map(function(data, i) { 
 
    return { 
 
     key: 'Stream' + i, 
 
     area: i === 1, 
 
     values: data 
 
    }; 
 
    }); 
 
} 
 
\t 
 
\t 
 
/// stream_layers.js: 
 

 
/* Inspired by Lee Byron's test data generator. */ 
 
function stream_layers(n, m, o) { 
 
    if (arguments.length < 3) o = 0; 
 
    function bump(a) { 
 
    var x = 1/(.1 + Math.random()), 
 
     y = 2 * Math.random() - .5, 
 
     z = 10/(.1 + Math.random()); 
 
    for (var i = 0; i < m; i++) { 
 
     var w = (i/m - y) * z; 
 
     a[i] += x * Math.exp(-w * w); 
 
    } 
 
    } 
 
    return d3.range(n).map(function() { 
 
     var a = [], i; 
 
     for (i = 0; i < m; i++) a[i] = o + o * Math.random(); 
 
     for (i = 0; i < 5; i++) bump(a); 
 
     return a.map(stream_index); 
 
    }); 
 
} 
 

 
/* Another layer generator using gamma distributions. */ 
 
function stream_waves(n, m) { 
 
    return d3.range(n).map(function(i) { 
 
    return d3.range(m).map(function(j) { 
 
     var x = 20 * j/m - i/3; 
 
     return 2 * x * Math.exp(-.5 * x); 
 
     }).map(stream_index); 
 
    }); 
 
} 
 

 
function stream_index(d, i) { 
 
    return {x: i, y: Math.max(0, d)}; 
 
}

text { 
 
    font: 12px sans-serif; 
 
} 
 
svg { 
 
    display: block; 
 
} 
 
html, body, #chart, svg { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script> 
 

 
<div id="chart" class='with-3d-shadow with-transitions'> 
 
    <svg></svg> 
 
</div>

：NVD3は、部品の標準化されたクラスを持っているように、これはのようになります。