D3.js学习笔记【暂完,待续】

起步

select

style

d3.select("#container")
.append('p')
.text("hello")
.style("color","red");

SVG

原生

一个简单的代码:

<svg width="100" height="100">
<circle r="50" cx="50" cy="50" stroke="yellow"
stroke-width="4"
fill="red"></circle>
</svg>

上面的代码是通过原生的生成的,效果如下:

D3.js

const canvas = d3.select("#container");
// add an svg

const svg = canvas.append("svg");
svg.attr("width", 100)
    .attr("height", 100);

const circle = svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")

circle

// circle
svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")

rect

// rect
svg.append("rect")
.attr("x",50)
.attr("rx",50)
.attr("y",10)
.attr("ry",10)
.attr("width",10)
.attr("height",100)
.attr("fill","red")

line

// line
svg.append("line")
.attr("x1","129")
.attr("x2","45")
.attr("y1","300")
.attr("y2","100")
.attr("stroke","gray")

text

// text
svg.append("text")
.attr("x",30)
.attr("y",100)
.attr("font-size",20)
.attr("file","gray")
.text("hello")

遍历数据

let dataArr = [4, 15, 34];
// add an svg element
const svg = canvas.append("svg");
svg.attr("width", 600)
.attr("height", 600);
const rect = svg.append("rect");
rect.attr("width", "24")
.data(dataArr)
.attr("height", "100")
.attr("fill", "gray")
.attr("x", function (d, i) { return d * 5; })
.attr("y", function (d, i) { return d * 10; })
// what are d and i, the d mean data, and the i mean index

我们来画一个柱状图

let dataArr = [3, 10, 48, 31];
// add an svg element
const svg = canvas.append("svg")
    .attr("width", 600)
    .attr("height", 600);
const rect = svg.selectAll("rect");
// 这里必须是selectAll,不然会出错的。
rect.data(dataArr)
    .enter()
    .append("rect")
    .attr("fill", "orange")
    .attr("x", function (d, i) {
    console.log(d)
    return i * 25;
    })
    .attr("width", "20")
    .attr("y", function (d, i) {
    return 100 - (d * 3);
    })
    .attr("height", function (d, i) {
    return d * 3;
    })
console.log(rect)

d3 - layouts

Hierarchical layouts

使用的数据:

let data = {
        "name": "A1",
        "children": [
            {
                "name": "B1",
                "children": [
                    {
                        "name": "C1",
                        "value": 100
                    },
                    {
                        "name": "C2",
                        "value": 300
                    },
                    {
                        "name": "C3",
                        "value": 200
                    }
                ]
            },
            {
                "name": "B2",
                "value": 200
            }
        ]
    };

代码1

<div id="content">
    <svg width="400" height="220">
        <g transform="translate(5, 5)">
            <g class="links"></g>
            <g class="nodes"></g>
        </g>
    </svg>
</div>

返回一个扁平的数组来表达root的子孙后代,而root.links()则返回一个扁平的对象数组来表达所有的父子links

代码2

<script>

    let data = {
        "name": "A1",
        "children": [
            {
                "name": "B1",
                "children": [
                    {
                        "name": "C1",
                        "value": 100
                    },
                    {
                        "name": "C2",
                        "value": 300
                    },
                    {
                        "name": "C3",
                        "value": 200
                    }
                ]
            },
            {
                "name": "B2",
                "value": 200
            }
        ]
    };
    /* 数据是:A1 底下 有 B1 和 B2 ,B1 底下 有 C1 C2 C3*/
    let root = d3.hierarchy(data);
    console.log(root);
    let leaves = root.leaves();
    console.log(leaves);
    let links = root.links();
    console.log(links);
    let path = root.path(root.children[0].children[1]);
    console.log(path);
    let descendants = root.descendants();
    console.log("descendants: ", descendants);
    // 返回一个扁平的数组来表达root的子孙后代,而root.links()则返回一个扁平的对象数组来表达所有的父子links
    let treeLayout = d3.tree();
    // 使用size设置
    treeLayout.size([400, 200]);
    //随后我们可以调用treeLayout函数,传入我们的hierarchy object root:
    treeLayout(root);
    // 这个函数执行的结果是会将root的每一个node都增加上x和y的value

    // let svg = d3.select("#content")
    //     .append("svg")
    //     .attr("width", "100%")
    //     .attr("height", "100%");


    d3.select('svg g.nodes')
        .selectAll('circle.node')
        .data(root.descendants())
        .enter()
        .append('circle')
        .classed('node', true)
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', 4);

    // Links
    d3.select('svg g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter()
        .append('line')
        .classed('link', true)
        .attr('x1', function (d) {
            return d.source.x;
        })
        .attr('y1', function (d) {
            return d.source.y;
        })
        .attr('x2', function (d) {
            return d.target.x;
        })
        .attr('y2', function (d) {
            return d.target.y;
        });


</script>

scales

var myScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);

d3将创建一个myScale函数用于接收[0,10]之间的数据输入(domain)映射为[0,600]像素的位置数据(range)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏丑胖侠

面试官,不要再问我“Java 垃圾收集器”了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

10020
来自专栏机器学习AI算法工程

运用孤立森林异常检测算法,过滤异常数据

在上述场景中,异常的数据与整个测试数据样本相比是很少的一部分,常见的分类算法例如:SVM、逻辑回归等都不合适。而孤立森林算法恰好非常适合上述场景,首先测试数据具...

9610
来自专栏机器学习AI算法工程

智能问答:LSTM 句子相似度分析

使用句子中出现单词的Vector加权平均进行文本相似度分析虽然简单,但也有比较明显的缺点:没有考虑词序且词向量区别不明确。如下面两个句子:

6920
来自专栏机器学习AI算法工程

找到源码了!使用python+机器学习方法进行情感分析(详细步骤)

先以带有正向标签和负向标签的各1500条真实的中文酒店评论语料作为训练集用以训练分类器,剩余带有正向标 签和负向标签的各500条真实的中文酒店评论语料作为测试集...

9850
来自专栏机器学习AI算法工程

深度学习-从感知器到LSTM(目的是处理序列问题)

感知器——基础的全连接网络——线性单元到线性模型——梯度下降——神经网络和反向传播算法——循环神经网络——LSTM——LSTM-CRF

8330
来自专栏机器学习AI算法工程

音乐推荐系统:推荐歌单以及推荐相似歌曲

使用爬虫爬取了网易云音乐中80w首歌400w+次收藏的歌单,存储格式为json格式,数据大小为3.59G,格式说明如下:

8310
来自专栏丑胖侠

面试官,不要再问我“Java虚拟机类加载机制”了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

5610
来自专栏机器学习AI算法工程

基于char-rnn和tensorflow生成周杰伦歌词

这个有趣的项目,具体就是基于字符预测下一个字符,比日说已知hello的前四个字母hell,那我们就可以据此预测下一个字符很可能是o,因为是字符char级别的,并...

11720
来自专栏机器学习AI算法工程

教你如何做特征选择

1、为什么要做特征选择 在有限的样本数目下,用大量的特征来设计分类器计算开销太大而且分类性能差。

10820
来自专栏趣谈编程

面试官让我找出无序数组的第k大元素,我该怎么办?

显然,数组中第一大的元素是24,第二大的元素是20,第三大的元素是17 ...... 第6大的元素是9。

8810

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励