javascript - 如何将文本附加到滚动框？

Question

我目前正在使用一个滚动框，框内的内容为“Some Text”:

<style>
.scroll {
background: #ff8e00;
height: 150px;
overflow: scroll;
width: 200px;
border: 1px solid #000;
padding: 10px;
} 
</style>

    <div class="scroll">
     Some Text
</div> 

出现的文本是 div 元素的一部分。现在我的目标是在 d3.js 中创建一个文本元素并将其附加到滚动框。文本元素如下所示:

<script>

var width = 600;
var height = 300;

var svg = d3.select("body")
      .append("svg")
      .attr("width", width)    
      .attr("height", height); 


     var text = svg.append("text")
        .attr("dx", 1)
        .attr("dy", 1)
        .text("Some New Text."); 

</script>

我想要“一些新文本”。出现在框中。也许你们中的一些人可以帮助我解决这个问题。谢谢。

Answer 1

希望这段代码对您有所帮助。

var width = 600;
var height = 300;

var svg = d3.select("div.scroll") //Selects div with the class scroll
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var text = svg.append("text")
  .attr("dy", "1em")  //Updating relative coordinate y
  .text("Some New Text.");

.scroll {
  background: #ff8e00;
  height: 150px;
  overflow: scroll;
  width: 200px;
  border: 1px solid #000;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="scroll">
  Some Text
</div>