Question

我正在处理我的导师在信息设计课中使用的代码，我正在尝试制作每个框架显示“时间”，“情感”和“心跳”的内容。

“时间”，“情绪”已经存在于代码中并且有效，但我在添加“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” - 两者之间没有任何空间。我也很高兴它出现在“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;
  });

将文本附加到框架

1 个答案: