имя данных, добавляющих данные html tag

Question

Учитывая, что мои имена данных могут быть очень длинными, я хочу реализовать всплывающую подсказку, когда пользователь наводит имя данных, однако я не могу найти документацию по добавлению настраиваемых тегов к сгенерированному имени данных HTML. Можно добавить класс, но не тег данных.

Пример

Способ слишком длинное имя данных в этом случае. Всплывающая подсказка была бы идеальной.

Answer 1

Хорошо, я понял, что вы хотели :)

Мы можем просто использовать пара дополнительных функций в нашем c3.generate вызовите и немного расширьте библиотеку, это даст вам еще больше гибкости ibility. Просто определите свои длинные метки внутри функции oninit.

Вот это jsFiddle, наведите курсор на легенду, чтобы увидеть: https://jsfiddle.net/abacaj90/6v2tpft2/14/

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
} 

function legendFollowMouse(e) { 
    var x = e[0]; 
    var y = e[1]; 
    return { 
    x: x - 50 + 'px', 
    y: y + 20 + 'px' 
    } 
} 

function createLegendTooltip() { 
    var svg = this.svg[0][0]; 
    var frag = document.createDocumentFragment(); 
    var div = document.createElement('div'); 
    var span = document.createElement('span'); 
    div.className = 'c3-legend-tooltip-container'; 
    span.className = 'c3-legend-tooltip'; 

    div.appendChild(span); 
    frag.appendChild(div); 
    insertAfter(svg, frag); 

    this.legendHoverNode = span; 
} 

function generateLegendHoverLabels(labels) { 
    createLegendTooltip.call(this); 
    var obj = {}; 
    this.data.targets.map(function(data, i) { 
    if(typeof labels[i] !== 'undefined') { 
     obj[data.id] = data.id + ': ' + labels[i]; 
    } 
    }) 
    return obj; 
} 


var chart = c3.generate({ 
    data: { 
    columns: [ 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 20, 180, 240, 100, 190, 250], 
     ['data3', 20, 180, 240, 100, 190, 250] 
    ], 
    }, 
    oninit: function() { 
    // declare your extra long labels here 
    var legendLongLabels = ['long content here, data3 doesnt have a tooltip!','even longer content here, you can style me with css!']; 

    this.legendHoverContent = generateLegendHoverLabels.call(this, legendLongLabels); 
    }, 
    legend: { 
    item: { 
     onmouseover: function (id) { 
     // keep default behavior as well as our tooltip 
     d3.select(this.svg[0][0]).classed('c3-legend-item-focused', true); 

     if (!this.transiting && this.isTargetToShow(id)) { 
      this.api.focus(id); 
     } 

     // if we defined the long labels, display them 
     if (this.legendHoverContent.hasOwnProperty(id)) { 
      var coords = legendFollowMouse(d3.mouse(this.svg[0][0])) 
      this.legendHoverNode.parentNode.style.display = 'block'; 
      this.legendHoverNode.parentNode.style.top = coords.y; 
      this.legendHoverNode.parentNode.style.left = coords.x; 
      this.legendHoverNode.innerHTML = this.legendHoverContent[id]; 
     } 
     }, 
     onmouseout: function (id) { 
     // keep default behavior as well 
     d3.select(this.svg[0][0]).classed('c3-legend-item-focused', false); 
     this.api.revert(); 

     // just hide the tooltips 
     this.legendHoverNode.parentNode.style.display = 'none'; 
     } 
    } 
    } 
}); 

Answer 2

Временный ответ в ожидании чего-то лучшего:

Это ввод данных с помощью Im.

var data = { 
"data": [{ 
    "A": "1075.000000", 
    "date": "01-03-2016" 
}, { 
    "A": "878.571429", 
    "date": "01-04-2016" 
}, { 
    "A": "485.000000", 
    "date": "04-03-2016" 
}, { 
    "A": "795.000000", 
    "date": "05-03-2016" 
}, { 
    "A": "620.000000", 
    "date": "06-03-2016" 
}, { 
    "A": "957.500000", 
    "date": "07-03-2016" 
}, { 
    "name": "H1W", 
    "A": "990.000000" 
}, { 
    "A": "950.000000", 
    "date": "09-03-2016" 
}, { 
    "A": "680.000000", 
    "date": "10-03-2016" 
}, { 
    "A": "1000.000000", 
    "date": "17-03-2016" 
}, { 
    "A": "535.000000", 
    "date": "18-02-2016" 
}], 
"name": "A", 
"namePlus": { 
    "location": "B or C or D or E", 
    "vars": { 
     "sizes": "Sizes: 2 or 3 or 5", 
     "unitSizes": "Units Amount: (0 to 2) or (3 to 5)" 
    } 
}} 

Это, как я обрабатываю вход

var tooltip = "<ul><li>" + data.name + "</li><li>" + data.namePlus.location + "</li>"; 
$.each(data.namePlus.vars, function (key, value) { 
    tooltip += "<li>" + value + "</li>"; 
}); 
tooltip += "</ul>"; 

c3.generate({ 
      bindto: '#lineChart', 
      data: { 
       json: data.data, 
       keys: { 
        x: 'date', 
        value: [data.name] 
       }, 
       xFormat: '%d-%m-%Y', 
       classes: { 
        value: 'HEY' 
       } 
      }); 

      $(".c3-legend-item-" + data.name).mouseover(function (e) { 
       $(".myTooltip").html(tooltip).css({visibility: "visible"}); 
      }); 
      $(".c3-legend-item-" + data.name).mouseleave(function (e) { 
       $(".myTooltip").html(tooltip).css({visibility: "hidden"}); 
      }); 

И это фактическое CSS

.myTooltip { 
background-color: black; 
border-radius: 6px; 
color: #fff; 
font-size: 12px; 
height: 25px; 
margin: auto; 
opacity: 0.68; 
padding: 5px 0; 
position: relative; 
text-align: center; 
top: 14px; 
visibility: hidden; 
width: 50%;}