Стиль меток осевого тика в d3.js

Следующий сценарий создает ось точечного масштаба с тремя метками и заголовком. Селектор body css определяет семейство шрифтов и размер шрифта для всех текстовых элементов в теле. Хотя название оси зависит от правил css, метки метки тика не являются, хотя сами являются текстовыми элементами. Я знаю, что я могу установить стиль метки тика, используя селектор текста .axis. Может быть, я упустил что-то очевидное здесь, но что мешает тик-этикеткам быть снятыми с помощью селектора?Стиль меток осевого тика в d3.js

Вот код:

<!doctype html> 
<meta charset="utf-8"> 

<script src="d3.min.V4.js"></script> 

<style> 

body { 
    font-family: Courier; 
    font-size: 18px; 
} 

</style> 

<body> 

</body> 

<script> 

var margin = {top: 20, right: 60, bottom: 40, left: 70}, 
    width = 600, 
    height = 100; 

var svg = d3.select('body').append('svg') 
         .attr('width', width) 
         .attr('height', height); 

var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]); 

// Add the x Axis 
svg.append("g") 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .attr("class", "axis") 
    .call(d3.axisBottom(xScale) 
    ); 

//x axis title 
svg.append('text') 
    .text('Colors') 
    .attr('x', width/2) 
    .attr('y', height - 5) 
    .style("text-anchor", "middle"); 


</script>

источник

2016-11-11 spyrostheodoridis

Согласно API, генератор оси автоматически устанавливает размер шрифта и шрифта семейства иксодовых клещей в элементе контейнера g, это является стиль по умолчанию (код скопировано из примера в API,):

//styles applied to the outer g element: 
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"> 
    <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path> 
    <g class="tick" opacity="1" transform="translate(0,0)"> 
     <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line> 
     <text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text> 
    </g> 
    //etc... 
</g>

Таким образом, представляется, что в силу специфики правил и очередности, этот стиль преобладает над стилем body CSS.

Чтобы изменить тики, вы должны указать text в своем CSS (или с использованием класса или идентификатора).

источник

2016-11-12 01:15:52

Спасибо, но это не касается моего вопроса. Заголовок оси «Цвета» также является SVG-текстом, но на него влияет селектор CSS тела. – spyrostheodoridis

Да, вы абсолютно правы. Всегда хорошая практика, чтобы пройти через исходный код! – spyrostheodoridis

Как отметил Херардо, API будет рисовать с заполнением # 000 по умолчанию. Работа должна состоять в том, чтобы повторно выбрать текст и перестроить его. Что выглядит примерно так:

var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]); 

// Add the x Axis 
var xTicks = svg.append("g") 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .attr("class", "axis") 
    .call(d3.axisBottom(xScale) 
    ); 

xTicks.selectAll('text').attr('fill', function(d){ 
    return d; 
    });

источник

2018-02-11 14:59:40

Стиль меток осевого тика в d3.js

ответ

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