1. дома
  2. Вопрос и ответ
  3. оси этикетки NVD3.js

оси этикетки NVD3.js

2016-04-08 2 views
2

Я ищу, как изменить размер шрифта и атрибуты шрифтов метки оси X и Y в NVD3.jsоси этикетки NVD3.js

документация не кажется, указывают на возможность для ведения это. Является ли это возможным?

источник

2016-04-08 DJClayworth

ответ

4

Похоже, что это свойство по умолчанию для этого в NVD3 или D3.

Однако мы можем изменить размер шрифта или любое другое свойство SVG CSS, просто применив его к текстовому элементу оси. Это можно сделать либо с помощью тега <style>, либо с помощью d3.select().

Текстовые метки Axis создаются <text> Узлы. Для обеих осей имеются элементы родительского контейнера, которые имеют следующие классы.

nv-x //for x axis <text> nodes 
nv-y //for y axis <text> nodes

Так что их легко использовать для установки свойств текстовой метки CSS.

.nv-x text{ 
    font-size: 20px; 
    fill: blue; 
} 
.nv-y text{ 
    font-size: 17px; 
    fill:red; 
}

Ниже приведена ссылка на другие атрибуты, доступные в NVD3.

http://nvd3-community.github.io/nvd3/examples/documentation.html

И ниже ссылка для свойств SVG оси в D3.

https://github.com/mbostock/d3/wiki/SVG-Axes

Они не содержат никакой информации относительно установки размера шрифта тиков.

Следующий рабочий образец образца.

<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>

источник

2016-04-14 19:13:31 11thdimension

0

Я не верю, что вы можете сделать это с помощью API NVD3 Javascript. Библиотека NVD3 определяет такие вещи, как цвет осей и размер шрифта в CSS.

Вы должны изучить файл nv.d3.css, чтобы получить представление о том, как они настраивают различные свойства CSS.

Чтобы ответить на ваш вопрос конкретно, я полагаю, вы могли бы играть вокруг с помощью следующей CSS, чтобы сделать то, что вы спрашиваете:

.nvd3 .nv-axis.nv-x text { 
    font-family: ...; 
    font-size: ...; 
    fill: ...' 
}

Примечание: Использование заливки, чтобы изменить цвет, а не цвет (так как мы имеем дело с SVG's

источник

2016-04-14 19:14:32

Смежные вопросы

 Смежные вопросы