D3的簡單語法

時間 2019-11-22

標籤 d3 簡單語法简体版

原文原文鏈接

選擇
選擇單個元素用 select：選擇第一個元素
選擇多個元素用 selectAll：javascript
- 按標籤選擇html
```
d3.select("div")
```
- 按類名選擇java
```
d3.select(".myclass")
```
- 經過ID選擇數組
```
d3.select("#hello")
```
- selectAll()：選擇HTML文檔中的多個元素app
```
d3.selectAll(".myclass")
```
選擇、插入、刪除元素svg
- append()：在選擇集末尾插入元素函數
```
d3.select("body").append("p")
```
- insert()：在選擇集前面插入元素this
```
d3.select("body").insert("p", "#moon")
```
- remove()：刪除元素spa
```
d3.select("#moon").remove()
```
文本屬性樣式操做code
- 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"));
```

數據鏈接

數據鏈接提供如下四種方法來處理數據集:

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>

使用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半徑.

使用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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。