【D3.js数据可视化系列教程】--(二)最简单的开始:添加元素

1. 添加元素语法:

[selection].append("p");

2. 怎么做?

将D3.js解压到桌面,同时在桌面创建一个index.html

<html>
    <head>
       <meta charset="utf-8">
       <title>D3测试</title>
       <script type="text/javascript" src="d3.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        d3.select("body").append("p").text("New paragraph!");     
    </script>
    </body>
</html>

3. 效果:

添加段落元素

4. 代码解释:

  • 引用D3所在路径
<script type="text/javascript" src="d3.js"></SCRIPT>
  • 选择body标签,为之添加一个p标签,并设置它的内容为New paragraph!
d3.select("body").append("p").text("New paragraph!");
  • 你可以将链接选择换行,这样代码结构更清晰
d3.select("body")
    .append("p")
    .text("New paragraph!");
  • 当然,也可以避免使用链接语法:
var body = d3.select("body");
var p = body.append("p");
p.text("New paragraph!");

以后,你也可以把这些页面和JS部署到你自己的服务器中。我们之后的示例都将部署到服务器,并使用Chrome浏览器演示!!

  • 10
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 20
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值