Блог

Вот мои данные.

 var data = [
    {
        "label": "branch-1",
        "values": [
            { "day": "Monday", "value": 20},
            { "day": "Tuesday", "value": 18},
            { "day": "Wednesday", "value": 29},
            { "day": "Thursday", "value": 31},
            { "day": "Friday", "value": 37},
            { "day": "Saturday", "value": 25},
            { "day": "Sunday", "value": 19}
        ]
    },
    {
        "label": "branch-2",
        "values": [
            { "day": "Monday", "value": 32},
            { "day": "Tuesday", "value": 29},
            { "day": "Wednesday", "value": 37},
            { "day": "Thursday", "value": 41},
            { "day": "Friday", "value": 31},
            { "day": "Saturday", "value": 28},
            { "day": "Sunday", "value": 17}
        ]
    }
]
  

Я пытаюсь добавить метку во всплывающую подсказку, однако получаю сообщение об ошибке «не определено». Мне также нужно добавить метки в конце каждой строки. Аналогично, имена в этом примере. Но я не могу найти, как этого добиться.

Ссылка на скрипку для моего кода здесь.

Чтобы получить метку во всплывающей подсказке, вам потребуется указать имя метки в отдельных точках данных:

Измените блок обработки данных следующим образом:

 data.forEach(function (kv) {
    var labelName = kv.label;
    kv.values.forEach(function (d) {
        d.value =  d.value; 
        d.label = labelName;
    });
});
  

Для добавления меток добавьте следующий раздел:

 city.append("text")
      .attr("transform", function(d) { var dayExt = d.values[d.values.length - 1].day; var valueExt = d.values[d.values.length - 1].value;  return "translate("    x(dayExt)   ","   y(valueExt)   ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.label });
  

Пожалуйста, найдите полную скрипку здесь: http://jsfiddle.net/prashant_11235/LY8zt /

Вы можете соответствующим образом оформить имена меток по мере необходимости.