将文本附加到框架上

appending text to a frame

本文关键字：框架 文本      更新时间：2024-04-18

我正在处理我的老师在信息设计课上使用的代码，我正在努力制作每一帧都显示"时间"、"情感"answers"心跳"的东西。

"时间"、"情感"已经在代码中并且有效，但是我很难添加"心跳"。我将心跳数据添加到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});

但我最终得到了"惊喜98"——中间没有空隙。我很高兴它显示为"惊喜98BPM"

您只需要在生成的字符串中添加空格：

 .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;
  });
相关文章：