Как форматировать значения галочки по оси X в C3.js

Question

Можно ли изменить форматирование тиков в c3.js. Например, могу ли я сделать part of tick bold? Моя диаграмма имеет дату и текст по оси x .. как я могу make dates bolder и менять тики, чтобы текст появился ниже даты?

изменение

Feb 01 Primaries and Caucuses 

в

 Feb 01 
Primaries and Caucuses 

js fiddle:

var chart = c3.generate({ 
     bindto: '#chart', 
    data: { 
     x: 'x', 
     columns: [ 
     ["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"], 
     ["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63], 
     ["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"] 
     ], 
     colors: { 
      Democrates: '#4575b4', 
      Republicans: '#d73027' 
     }, 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      max: '2016-11-08', 
      tick: { 
       values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-18", "2016-07-28" ], 
       format: function (x) { 
        if (x == "Mon Feb 01 2016 00:00:00 GMT+0100 (CET)"){ 
        return 'Feb 01' + 'Primaries and Caucuses ' 
       } else if (x == "Tue Nov 08 2016 00:00:00 GMT+0100 (CET)") { 
        return 'Nov 08 Election Day' 

       } else if (x == "Mon Sep 26 2016 00:00:00 GMT+0200 (CEST)") { 
        return ' Sep 26 Start of Presidential Debates' 

       } else if (x == "Mon Jul 18 2016 00:00:00 GMT+0200 (CEST)") { 
        return 'Jul 25 Announcement of Nominees' 

       } else { 
        var format= d3.time.format("%b %d"); 
           var date = format(x) 
           return date 
       }}, 
       fit: false 
     } 
     } 
    }, 
    grid: { 
    y: { 
     lines: [ 
       {value: 50}, 

      ] 
    }, 
    x: { 
    lines: [ 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "end"} 


    ] 
    } 
    } 
}); 

Answer 1

Для этого мы можем использовать выбор d3 или другую библиотеку, чтобы заставить разрыв строки, форматирование первой строки и последующих строк.

data.axis.x.tick.multiline = false заставляет исходный c3.generate() использовать отдельные строки, мы используем наш код, чтобы исправить это.

fixLabels() вызывается несколько раз, чтобы избежать проблем с изменением размера окна. Я уверен, что это можно улучшить.

Обратите внимание, что я заставил ярлык проверить формат YYYYMMDD, чтобы разрешить несколько часовых поясов.Исходный код не работал для меня, так как я в BST.

var splitter = "~"; // choose a character unlikely to appear in your label 
 
var chart = c3.generate({ 
 
    bindto: '#chart', 
 
    data: { 
 
     x: 'x', 
 
     columns: [ 
 
     ["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"], 
 
     ["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63], 
 
     ["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"] 
 
     ], 
 
     colors: { 
 
      Democrates: '#4575b4', 
 
      Republicans: '#d73027' 
 
     }, 
 
    }, 
 
    axis: { 
 
     x: { 
 
      type: 'timeseries', 
 
      max: '2016-12-08', 
 
      tick: { 
 
       values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-28" ], 
 
       format: function (x) { 
 
        // calling this here may seem odd. This forces 
 
        // re-format of the labels even on window or container resize. 
 
        fixLabels(); 
 
        var Ymdformat = d3.time.format("%Y%m%d"); 
 
        if (Ymdformat(x) == "20160201"){ 
 
        return 'Feb 01' + splitter + 'Primaries and Caucuses' 
 
       } else if (Ymdformat(x) == "20161108") { 
 
        return 'Nov 08' + splitter + 'Election Day' 
 

 
       } else if (Ymdformat(x) == "20160926") { 
 
        return 'Sep 26' + splitter + 'Start of Presidential Debates' 
 

 
       } else if (Ymdformat(x) == "20160728") { 
 
        return 'Jul 28' + splitter + 'Announcement of Nominees' 
 
       } else { 
 
       \t \t \t \t \t \t \t \t var format = d3.time.format('%b %d'); 
 
           var date = format(x) 
 
           return date 
 
       } 
 
       }, 
 
       fit: false, 
 
       multiline: false 
 
     } 
 
     } 
 
    }, 
 
    grid: { 
 
    y: { 
 
     lines: [ 
 
       {value: 50}, 
 

 
      ] 
 
    }, 
 
    x: { 
 
    lines: [ 
 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
 
     class: "xLineLable", position: "end"} 
 

 

 
    ] 
 
    } 
 
    } 
 
}); 
 

 
function fixLabels() { 
 
    d3.selectAll("text[y='9'] tspan:not(.added)").each(function() { 
 
    // Get the original label including splitter character(s) 
 
    text_to_split = this.innerHTML; 
 
    // Split into an array 
 
    text_array = text_to_split.split(splitter); 
 
    // Set first tspan to original label date 
 
    this.innerHTML = text_array[0]; 
 
    // Set first tspan to bold text 
 
    d3.select(this).style("font-weight",600); 
 
    // Add additional tspans as necessary 
 
    for (i = 1; i < text_array.length; i++) { 
 
     d3.select(d3.select(this).node().parentNode) 
 
     .append("tspan") 
 
     .attr('x',0) 
 
     .attr('dy','1em') 
 
     .attr('dx',0) 
 
     .attr('class','added') 
 
     .attr('font-style','italic') 
 
     .text(text_array[i]); 
 
    } 
 
    }); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
<div id="chart"></div>

Answer 2

Отказ от ответственности: это неполный ответ, и я п когда-либо использовал c3.js (только d3.js), поэтому я не знаю, что это что-то меняет.

Короткий ответ, нет, нет никакого прямого способа сделать это, что я знаю (тем более, что многострочный текст является реальной боли в SVG)

Но, если вы чувствуете, как взятие долгий путь, есть способ:

• создать тики, как вы делаете сейчас, с добавлением специального символа, где вы хотите разрыв строки. (Небезопасное пространство сделало бы трюк).

• выбрать клеща элементы: d3.selectAll(".x .tick text")

• для каждого из них:

  • извлечь текст в переменную,
  • вставить "<tspan>" в начале и "</tspan>" в конце
  • do search & заменить вместо своих фиктивных символов на "</tspan><tspan>"
  • введите новое значение как html для элементов тика.

Это само по себе недостаточно, так как tspans нужно прийти с целой системой координат и выравнивания (что я не понимаю достаточно хорошо, чтобы положить в ответ), плюс, если вы хотите, чтобы некоторые жирным шрифтом вам нужно применить текстовый стиль .... но однажды или другой он доставит вас туда ... (удачи!)