D3.js的v5版本入门教程(第二章)—— 第一个程序 Hello World

D3.js的v5版本入门教程(第二章)

    1、利用D3.js在网页上显示一个Hello World文本

<body>
  	<p></p>
  	<p></p>
    <script>
    	var p = d3.select("body")
    		.selectAll("p");
    		
    	p.text("Hello World");
    </script>
  </body>

    运行结果:

        

    代码说明:

        -可以发现,作者先在<body>标签中加入了两个<p>标签,当时没有写内容,然后再在<script>中动态生成Hello World

        -var p = d3.select("body")

    .selectAll("p");这是D3中的选择集,从字面上的意思就是先选择<body>这个标签,然后在<body>标签中选择所有的<p>标签,所以var p 中的p代表<body>中的那两个<p>标签(不懂没关系,关于选择集后面章节会讲到,而且会经常用到,本章的重点不在这里)

        -p.text("Hello World"),熟悉js的人一看就知道,这是为(所有)<p>标签添上文字,因此运行结果就显示了两个Hello World

    2、利用D3.js在网页上修改文本的显示

<body>
    <p></p>
  	<p></p>
    <script>
    	var p = d3.select("body")
    		.selectAll("p");
    		
    	p.text("http://d3js.org");
    </script>
  </body>

    运行结果:

        

    代码说明:

        -可以发现,利用D3.js在网页上不论是修改文本内容还是显示文本内容,代码是一样的,不一样的仅仅是你想显示的文本内容




猜你喜欢

转载自blog.csdn.net/qq_34414916/article/details/80026406
今日推荐