Ändern Sie die Hintergrundfarbe des Fokus-Diagramms in NVD3

Question

Weiß jemand, ob es möglich ist, den Hintergrund der Fokusleiste der LineWithFocusChart in NVD3 zu ändern?

Answer 1

Da NVD3 auf d3 gebaut ist, können Sie d3 Funktionalität auswählen, um die Rechtecken verwenden, die den Hintergrund der Fokusleiste bilden und ihr Styling ändern. Als NVD3 standardisierte Klassen für Teile hat, sollte dies wie folgt aussehen:

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>