码迷,mamicode.com
首页 > 其他好文 > 详细

D3的简单语法

时间:2019-10-23 13:47:20      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:attr   tran   简单   org   height   lang   container   lan   数据连接   

  1. 选择
    选择单个元素用 select:选择第一个元素
    选择多个元素用 selectAll:

    • 按标签选择

      d3.select("div")   
    • 按类名选择

      d3.select(".myclass")
    • 通过ID选择

      d3.select("#hello")
    • selectAll(): 选择HTML文档中的多个元素

      d3.selectAll(".myclass")

  2. 选择、插入、删除元素

    • append():在选择集末尾插入元素

      d3.select("body").append("p")
    • insert():在选择集前面插入元素

      d3.select("body").insert("p", "#moon")
    • remove():删除元素

      d3.select("#moon").remove()

  3. 文本属性样式操作

    • text():设置所选/附加元素的内容

      d3.select("div.myclass").append("span").text("from D3.js")
    • html():设置所选/附加元素的html内容

      d3.select(".myclass").html("Hello World! <span>from D3.js</span>")
    • attr():添加或更新所选元素的属性

      d3.select(".myclass").attr("style", "color: red");
    • style():设置所选元素的样式属性

      d3.select(".myclass").style("color", "red");
    • classed():设置HTML元素的"class"属性

      • 要添加类:将分类方法的第二个参数设置为true

        d3.select(".myclass").classed("myanotherclass", true);
      • 删除类:将分类方法的第二个参数设置为false

        d3.select(".myclass").classed("myanotherclass", false);
      • 检查类:省略第二个参数并传递要查询的类名,存在则返回true,如果不存在,则返回false

        d3.select(".myclass").classed("myanotherclass");
      • 切换类: 将类翻转到相反的状态 - 如果它已经存在则将其删除,如果它尚不存在则添加它

        element.classed("myanotherclass", !element.classed("myanotherclass"));
  4. 数据连接

    数据连接提供以下四种方法来处理数据集:

    • datum():绑定一个数据到选择集上, 为HTML文档中的单个元素设置值

      <p></p>
      d3.select("p")
          .datum(50)
          .text(function(d) { 
          return "选择的单个元素的数据为" + d; 
      });
    • data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定

      <ul id = "list">
         <li><li>
         <li></li>
      </ul>
      d3.select("#list").selectAll("li")
          .data([10, 20, 30, 25, 15])
          .text(function(d) { return d; });
    • enter():对剩余数据的访问(未映射到现有元素),从相应数据创建新元素,为剩余的数据项创建元素。

      d3.select("#list").selectAll("li")
          .data([10, 20, 30, 25, 15])
          .text(function(d) { return "已存在元素的值为:" + d; })
          .enter()
          .append("li")
          .text(function(d) 
                { return "动态创建元素的值为: " + d; });
      3. li - 30
      4. li - 25
      5. li - 15
    • exit():处理从数据集中动态删除的数据项

      d3.selectAll("li")
          .data([10, 20, 30, 15])
          .exit()
          .remove()

    Data Function :

    • 获取相应的数据和使用data()方法分配的数据集的索引

    • 为绑定到DOM的每个数据值调用此匿名函数

    <!DOCTYPE html>
    <html>
        <head>
            <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
            <style>
                body { font-family: Arial; }
            </style>
        </head>
    
        <body>
            <p></p>
            <p></p>
            <p></p>
            <script>
                var data = [1, 2, 3];
                var paragraph = d3.select("body")
                .selectAll("p")
                .data(data)
                .text(function (d, i) {
                    console.log("d: " + d);
                    console.log("i: " + i);
                    console.log("this: " + this);
                    return "The index is " + i + " and the data is " + d;
                });
            </script>
        </body>
    </html>
  5. 使用D3创建使用svg

    Step 1:创建一个容器来保存SVG图像

    <div id = "svgcontainer"></div>

    Step 2: 使用select()方法选择SVG容器,并使用append()方法注入SVG元素。 使用attr()和style()方法添加属性和样式。

    var width = 300;
    var height = 300;
    var svg = d3.select("#svgcontainer")
    .append("svg").attr("width", width).attr("height", height);

    Step 3:在svg元素中绘图

    svg.append("line")
        .attr("x1", 100)
        .attr("y1", 100)
        .attr("x2", 200) 
        .attr("y2", 200)
        .style("stroke", "rgb(255,0,0)")
        .style("stroke-width", 2);
    <!DOCTYPE html>
    <html>
        <head>
            <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
            <style>
                body { font-family: Arial; }
            </style>
        </head>
    
        <body>
            <div id = "svgcontainer">
            </div>
            <script language = "javascript">
                var width = 300;
                var height = 300;
                var svg = d3.select("#svgcontainer")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
                svg.append("line")
                    .attr("x1", 100)
                    .attr("y1", 100)
                    .attr("x2", 200)
                    .attr("y2", 200)
                    .style("stroke", "rgb(255,0,0)")
                    .style("stroke-width", 2);
            </script>
        </body>
    </html>

    svg 中常用图形属性

    • 矩形

      <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
      • x :这是矩形左上角的x坐标。
      • y: 这是矩形左上角的y坐标。
      • width: 这表示矩形的宽度。
      • height :这表示矩形的高度。
    • 圆形

      <circle cx = "200" cy = "50" r = "20" fill = "green"/>
      • cx :这是圆心的x坐标。
      • cy : 这是圆心的y坐标。
      • r :这表示圆的半径。
    • 椭圆

    <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
    • cx:这是椭圆中心的x坐标.
    • cy:这是椭圆中心的y坐标.
    • rx: 这是圆的x半径.
    • ry:这是圆的y半径.

  6. 使用D3.js进行转换

    Step 1 : 创建一个容器来保存SVG图像,如下所述。

    <div id = "svgcontainer"></div>

    Step 2 : 创建SVG图像,如下所述。

    var width = 300;
    var height = 300;
    var svg = d3.select("#svgcontainer")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

    Step 3: 创建SVG组元素并设置translate和rotate属性。

    var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

    Step 4 :创建一个SVG矩形并将其附加到组内。

    var rect = group
    .append("rect")
    .attr("x", 20)
    .attr("y", 20)
    .attr("width", 60)
    .attr("height", 30)
    .attr("fill", "green")

    Step 5:创建一个SVG圈并将其附加到组内。

    var circle = group
    .append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", 30)
    .attr("fill", "red")
    • 转换库 d3-transform

      <script src="http://d3js.org/d3.v4.min.js"></script>
      <script src="d3-transform.js"></script>

      使用方法

      var my_transform = d3Transform()
      .translate([60, 60])
      .rotate(30);
      
      var group = svg
      .append("g")
      .attr("transform", my_transform);

D3的简单语法

标签:attr   tran   简单   org   height   lang   container   lan   数据连接   

原文地址:https://www.cnblogs.com/consider/p/11725412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!