добавляющий текст к кадру

Question

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

«Время», «эмоция» уже находятся в коде и работают, но у меня возникают проблемы с добавлением «Heartbeat». Я добавил сердцебиение данных в файл JSon:

[{ 
    "img": "00.01.39.jpg", 
    "time": "0:01:39", 
    "emotion": "Surprise", 
    "heartbeat": "98" 
}, 

Теперь вот проблема, я могу добавить его, чтобы показать на раме, просто добавив его в эту часть ?:

// Создает текст на каждый кадр с таймкод и эмоции прикреплены к этому кадру

frames.append("p") 
    .attr("class", "frame-time") 
    .text(function (d) { 
     return d.time 
    }) 
    .append("span") 
    .attr("class", "frame-emotion") 
    .text(function (d) { 
     return d.emotion 
    }); 

Я попробовал, добавив это после того, как эмоции, но это не сработало:

.append("span") 
.attr("class","frame-heartbeat") 
.text(function(d){return d.heartbeat}) 

Я также попытался это:

.append("span") 
.attr("class","frame-emotion") 
.text(function(d){return d.emotion+d.heartbeat}); 

Но я закончил с «SURPRISE98» - без пробелов между ними. Я ALSObe доволен он отображается как «СЮРПРИЗ» 98BPM

Answer 1

Вам просто нужно добавить пространство к сгенерированной последовательности:

.append("span") 
.attr("class","frame-emotion") 
.text(function(d) { return d.emotion + " " + d.heartbeat + "BPM"; }); 

Если вы хотите добавить его в кадре самостоятельно, добавьте его к frames:

frames.append("p") 
    .attr("class", "frame-heartbeat") 
    .text(function (d) { 
    return d.heartbeat; 
    });