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

无道 2019-07-06 0 条评论 前端相关 阅读284 手机阅读

起步

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>

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

截图-1557833823

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)

截图-1557837782

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)

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: d3.js d3 笔记
修改: 2019-07-06 20:45
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~