如何将文本附加到滚动框？答案

【问题标题】：How to append text to a scrolling box?如何将文本附加到滚动框？
【发布时间】：2017-05-26 00:43:50
【问题描述】：

我目前正在使用一个滚动框，里面有“一些文本”的内容：

<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>

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

【问题讨论】：

也许它是相关的，因为你给的东西没有错，它脱离了上下文。
你的意思是代码的遗漏部分吗？这只是一些基本的东西，占据了很多位置。
这是 HTML 文本还是 SVG 文本？什么是svg 选择？
这是一个 svg 文本。我刚刚编辑了代码。
如果您想将 SVG 附加到该 div，然后将文本附加到 SVG，只需执行 var svg = d3.select(".scroll")。

标签： javascript css d3.js text scroll

【解决方案1】：

希望这个 sn-p 有所帮助。

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>

【讨论】：