ich suche, wie die Schriftgröße und Attribute der X- und Y-Achsenbeschriftung Schriftart in NVD3.js ändernAchsenbeschriftungen in NVD3.js
Die Dokumentation scheint nicht eine Option, um anzuzeigen, zu tun Dies. Ist es möglich?
Es scheint keine Standardeigenschaft dafür in NVD3 oder D3 selbst zu sein.
Wir können jedoch die Schriftgröße oder eine andere SVG-CSS-Eigenschaft ändern, indem Sie sie direkt auf das Textelement der Achse anwenden. Dies kann entweder mithilfe des Tags <style> oder mithilfe von d3.select() erfolgen.
Axis Textbeschriftungen werden von <text> Knoten erstellt. Für beide Achsen gibt es Eltern-Container-Elemente, die folgende Klassen haben.
nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes
So ist es einfach, sie zu verwenden, um die Textbeschriftung CSS-Eigenschaften festzulegen.
.nv-x text{
font-size: 20px;
fill: blue;
}
.nv-y text{
font-size: 17px;
fill:red;
}
Im Folgenden finden Sie den Link für andere Attribute, die in NVD3 verfügbar sind.
http://nvd3-community.github.io/nvd3/examples/documentation.html
Und unten ist der Link für die SVG-Achse Eigenschaften in D3. Diese
https://github.com/mbostock/d3/wiki/SVG-Axes
enthalten keine Informationen über die Einstellung Schriftgröße von Zecken.
Folgendes ist funktionierendes Codebeispiel.
<html>
<head>
\t <style>
\t \t #chart svg {
\t \t height: 300px;
\t \t }
\t \t .nv-x text{
\t \t font-size: 20px;
fill: blue;
\t \t }
.nv-y text{
\t \t font-size: 17px;
fill:red;
\t \t }
\t </style>
<head>
\t <meta charset="utf-8">
\t <link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
\t <script type="text/javascript" src="http://nvd3.org/assets/lib/d3.v2.js"></script>
\t <script type="text/javascript" src="http://nvd3.org/assets/lib/fisheye.js"></script>
\t <script type="text/javascript" src="http://nvd3.org/assets/js/nv.d3.js"></script>
</head>
<body>
\t <div id="chart">
\t <svg></svg>
\t </div>
\t <script>
\t \t var data = function() {
\t \t var sin = [],
\t \t \t cos = [];
\t \t for (var i = 0; i < 100; i++) {
\t \t \t sin.push({x: i, y: Math.sin(i/10)});
\t \t \t cos.push({x: i, y: .5 * Math.cos(i/10)});
\t \t }
\t \t return [
\t \t \t {
\t \t \t values: sin,
\t \t \t key: 'Sine Wave',
\t \t \t color: '#ff7f0e'
\t \t \t },
\t \t \t {
\t \t \t values: cos,
\t \t \t key: 'Cosine Wave',
\t \t \t color: '#2ca02c'
\t \t \t }
\t \t ];
\t \t };
\t \t nv.addGraph(function() {
\t \t window.chart = nv.models.lineChart()
\t \t \t .useInteractiveGuideline(true)
\t \t \t ;
\t \t chart.xAxis
\t \t \t .axisLabel('Time (ms)')
\t \t \t .tickFormat(d3.format(',r'))
\t \t \t ;
\t \t chart.yAxis
\t \t \t .axisLabel('Voltage (v)')
\t \t \t .tickFormat(d3.format('.02f'))
\t \t \t ;
\t \t \t
\t \t d3.select('#chart svg')
\t \t \t .datum(data())
\t \t \t .transition().duration(500)
\t \t \t .call(chart)
\t \t \t ;
\t \t nv.utils.windowResize(chart.update);
\t \t return chart;
\t \t });
\t \t
\t </script>
</body>
</html>Ich glaube nicht, dass Sie dies über die NVD3 Javascript API tun. Die NVD3-Bibliothek spezifiziert Dinge wie Achsenfarbe und Schriftgröße in CSS.
Sie sollten die Datei nv.d3.css untersuchen, um eine Vorstellung davon zu bekommen, wie sie verschiedene CSS-Eigenschaften konfigurieren.
Ihre Frage speziell zu beantworten, ich glaube, Sie könnten mit der folgenden CSS spielen, um zu erreichen, was Sie fragen:
.nvd3 .nv-axis.nv-x text {
font-family: ...;
font-size: ...;
fill: ...'
}
Hinweis: Verwendung Füllfarbe zu ändern, nicht in Farbe (da wir es zu tun SVG