Änderung Margen und Polsterung in nvd3 Diagramm

Question

Ich habe folgendes nvd3 gestapelte Flächendiagramm:

I Spanne zwischen den Zahlen/Daten und der grafischen Darstellung sowie die Legende an der Spitze hinzufügen möchten, und der Graph. (Bitte auf das Bild sehen, habe ich die Positionen markiert mit einer roten Linie:

Ich habe das gemacht html untersucht, kann aber nicht die Randwerte über CSS zugreifen, auch wenn ich versuchen sie es inline mit firefox Konsole ich habe in der Lage font-family und Farbe mit diesem CSS zu ändern:.

#chart1 
    height: 300px 
    text 
    fill: #1a1f22 
    font-size: 0.7em 
    font-family: 'Source Sans Pro', sans-serif 

Aber noch was Elemente (Text, g, svg, ...) ich versuche, um einen Stil zu befestigen, ändert sich nichts in Bezug auf Marge.

Hier ist der JavaScript-Code für das Diagramm:

nv.addGraph(function() { 
    var histcatexplong = [ 
     <?= $array ?> 

    ]; 


    var colors = d3.scale.category20(); 
    var keyColor = function(d, i) {return colors(d.key)}; 

    var chart; 
chart = nv.models.stackedAreaChart() 
.useInteractiveGuideline(true) 
.showControls(false) 
.x(function(d) { return d[0] }) 
.y(function(d) { return d[1] }) 
.color(keyColor) 

.transitionDuration(300); 




chart.xAxis 
.tickFormat(function(d) { return d3.time.format('%e.%m.%y')(new Date(d)) }); 



chart.yAxis 
.tickFormat(d3.format(',.2f')); 

d3.select('#chart1') 
.datum(histcatexplong) 
.transition().duration(1000) 
.call(chart) 


.each('start', function() { 
setTimeout(function() { 
d3.selectAll('#chart1 *').each(function() { 

if(this.__transition__) 
this.__transition__.duration = 1; 
}) 
}, 0) 
}); 

nv.utils.windowResize(chart.update); 


return chart; 
}); 

Ich habe alle über nvd3 die Beispiele und Dokumente gelesen, aber immer noch nicht, einen Weg zu manipulieren die oben finden. Weiß jemand einen Weg zu tun?

Answer 1

In Bezug auf Ihre Marge Frage, können Sie die Ränder um die Legende ändern durch den Aufruf:

chart.legend.margin().bottom = 50; 

Oder alternativ:

chart.legend.margin({top: 5, right: 0, bottom: 50, left: 0}); 

Sie Platz, indem sie zwischen den Ticks und den Achsen hinzufügen unter Verwendung der regulären D3 tickPadding function:

chart.yAxis.tickPadding(25); 
chart.xAxis.tickPadding(25); 

wie in this Plunker.

Answer 2

.nvd3 .nv-axis.nv-x path.domain { 
    stroke-opacity: 1; 
    stroke: red; 
} 

CSS ist wahrscheinlich der Weg zu gehen. (NVD3 macht die X-Achse standardmäßig unsichtbar, deshalb möchten Sie zuerst die Deckkraft auf 1 setzen.)

Beispiel in this Plunker.