zoukankan      html  css  js  c++  java
  • D3笔记01——D3简介与安装

    1 D3简介

    发布于2011年,全称Data-Driven Documents,直译为“数据驱动的文档”。
    简单概括为一句话:D3是一个Javascript的函数库,是用来做数据可视化的
    文档指DOM,即文档对象模型(Document Object Model)。D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图表。
    由于D3是Javascript的函数库,故它也是一个js文件,也常称为D3.js。

    2 D3安装

    1)安装D3:
    在<script>中引入D3文件即可
    官方下载的D3文件名为,d3.zip,里面有三个文件,d3.js、d3.min.js(压缩版)以及LICENSE(版权许可证文件)
    也可以通过网络引用d3文件:
    在head标签中加入<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
    可以发现http://d3js.org/d3.v5.min.js中使用的是v5版本,如果想使用v3版本,将v5改成v3即可。
    2)搭建服务器(可选)
    安装Apache
    3)例子:
    1⃣️页面中输出hello world
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
    var p = d3.select("body")
      .selectAll("p")
      .text("Hello World!");
    p.style("color","red");
    p.style("font-size","72px");
    </script>
    2⃣️页面中画一个圆
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
    var width = 400;
    var height = 400;
    var svg = d3.select("body")
    .append("svg")
    .attr("width",width)
    .attr("height",height);
    svg.append("circle")
       .attr("cx","50px")
       .attr("cy","50px")
       .attr("r","50px")
       .attr("fill","red");
    </script>
    

      

     
  • 相关阅读:
    Hive-1.2.1_05_案例操作
    Hive-1.2.1_04_DML操作
    Hive-1.2.1_03_DDL操作
    Hive-1.2.1_02_简单操作与访问方式
    Hive-1.2.1_01_安装部署
    Hadoop2.7.6_08_Federation联邦机制
    Hadoop2.7.6_07_HA高可用
    NFS服务搭建与配置
    Hadoop2.7.6_06_mapreduce参数优化
    Hadoop2.7.6_05_mapreduce-Yarn
  • 原文地址:https://www.cnblogs.com/superjishere/p/12091808.html
Copyright © 2011-2022 走看看