javascript - 将文本附加到框架

Question

我正在编写我的讲师在信息设计类(class)中使用的代码，并且我正在尝试制作一些内容，其中每个帧都显示“时间”、“情感”和“心跳”。

“时间”、“情感”已经在代码中并且可以工作，但我在添加“心跳”时遇到了问题。我将心跳数据添加到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”——中间没有空格。我也很高兴它显示为“SURPRISE 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;
  });