如何将文字附加到滚动框?

时间:2017-05-26 00:43:51

标签: javascript css d3.js text scroll

我目前正在使用一个滚动框,其内容为“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中创建一个文本元素并将其附加到滚动框。 text元素如下所示:

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

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

1 个答案:

答案 0 :(得分: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>