метки оси укладка - Угловая NVD3 - Line диаграмма

Question

использование - Угловая NVD3 Linechart

Я получаю milliseconds, преобразуя их в формат ('%H:%M') для отображения на оси х.

xAxis: { 
      tickFormat: function(d) { 
      return d3.time.format('%H:%M')(new Date(d)); 
     }, 

выше работает нормально, и показывает данные в формате 10:30.

Мне нужно отформатировать его стиль, 10: в другом цвете и 30 в разных.

я написал ниже Javascript,

xAxis: { 
      axisLabel: '', 
      tickFormat: function(d) { 
      var xlabel = d3.time.format('%H:%M')(new Date(d)); 
      var xlabelB = xlabel.substring(0, 3); 
      var xlabelA = xlabel.substring(3, 5); 
      var text = '<span class="lightText">'+ xlabelB + '</span><span class="boldText">' + xlabelA + '</span>'; 
          console.log(text); 
          return text; 
    }, 

Но выше оказывается внутри <Text> tag, поэтому он не оказывает HTML.

Как я могу достичь того же. Вот plunker

Вот сгенерированный HTML после форматирования,

<text dy=".71em" y="10" transform="" style="text-anchor: middle;"><span class="lightText">10:</span><span class="boldText">30</span></text> 

Перед форматированием

<text dy=".71em" y="10" transform="" style="text-anchor: middle;">10:30</text> 

Answer 1

вы имели в виду использовать tspan в текстовые теги? Использование tspan позволит форматировать текст отдельно как в этом примере ниже

<svg> 
 
    <g> 
 
    <text dy=".71em" y="10" x="0" transform="" style="text-anchor: left;"> 
 
     <tspan style="fill:red;">10:</tspan> 
 
     <tspan style="font-weight:bold;">30</tspan> 
 
    </text> 
 
    </g> 
 
</svg>

Хотя, вы не сможете использовать HTML, используя функцию tickFormat для осей. Полагаю, вам нужно будет обработать диаграмму (используя d3) и построить свою собственную ось.