Javascript/D3 --- Условный формат для метки

Question

У меня есть календарь тепловой карты, содержащий часы, разбитые на такие значения, как: 6,30,7,30,8,30. Итак, вы можете предположить, что 6 - 6:00, а 30 после - 6:30. Я хочу, чтобы значения часов были больше (скажем, 12 пикселей), а 30 - по умолчанию у меня в CSS (скажем, 10 пикселей). Вот Javascript я уже для построения часовых меток:

Настройте цвета, дни, часы

var margin = { top: 20, right: 0, bottom: 120, left: 30 }, 
      width = 1080 - margin.left - margin.right, 
      height = 430 - margin.top - margin.bottom, 
      gridSize = Math.floor(width/28), 
      legendElementWidth = gridSize*2, 
      buckets = 9, 
      colors = ["#f03b20","#fd8d3c","#feb24c","#fed976","#ffffb2","#c2e699","#78c679","#31a354","#006837"], //,"#081d58"], // alternatively colorbrewer.YlGnBu[9] 
      days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 
      times = ["6", "30", "7", "30", "8", "30", "9", "30", "10", "30", "11", "30", "12", "30", "1", "30", "2", "30", "3", "30", "4", "30", "5", "30","6","30","7","30"]; 

Участок оси Х этикетки.

var timeLabels = svg.selectAll(".timeLabel") 
       .data(times) 
       .enter().append("text") 
       .text(function(d) { return d; }) 
       .attr("x", function(d, i) { return i * gridSize; }) 
       .attr("y", 0) 
       .style("text-anchor", "middle") 
       .attr("transform", "translate(" + gridSize/2 + ", -6)") 
       .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });* 

Мой вопрос: Как я могу изменить этот Javascript, чтобы иметь условный формат, так что число час (1-12) имеют более крупный шрифт и 30 использует по умолчанию?

Answer 1

Вы можете передать функцию, чтобы установить атрибут font-size:

.attr("font-size", function(d) { return +d < 20 ? "12px" : "10px"; }); 

В общем, было бы более D3, как использовать временную шкалу и оси, чтобы он форматировать и размещать метки автоматически. Это сделало бы то, что вы хотите сделать более сложным, хотя, возможно, вам лучше придерживаться того, что у вас есть.