D3的简单语法

Posted 2021-03-25 consider

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3的简单语法相关的知识，希望对你有一定的参考价值。

选择
选择单个元素用 select：选择第一个元素
选择多个元素用 selectAll：
- 按标签选择
```
d3.select("div")   
```
- 按类名选择
```
d3.select(".myclass")
```
- 通过ID选择
```
d3.select("#hello")
```
- selectAll()：选择html文档中的多个元素
```
d3.selectAll(".myclass")
```
选择、插入、删除元素
- append()：在选择集末尾插入元素
```
d3.select("body").append("p")
```
- insert()：在选择集前面插入元素
```
d3.select("body").insert("p", "#moon")
```
- remove()：删除元素
```
d3.select("#moon").remove()
```
文本属性样式操作
- 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);

以上是关于D3的简单语法的主要内容，如果未能解决你的问题，请参考以下文章

d3.keys（）语法澄清？

在下面的代码片段中的剩余 ='passthrough' 处的代码中出现语法错误

d3.js & json - 简单的示例代码？

使D3堆积条形图填充父SVG容器

即使鼠标不移动，D3'Drag'事件也会触发

怎么学习d3.js