精华内容
下载资源
问答
  • d3绘制树状图
    千次阅读
    2017-09-10 15:56:54

    json数据集:

    {
      "name":"中国",
      "children":
      [
        {
          "name":"浙江" ,
          "children":
          [
            {"name":"杭州" },
            {"name":"宁波" },
            {"name":"温州" },
            {"name":"绍兴" }
          ]
        },
    
        {
          "name":"广西" ,
          "children":
          [
            {
              "name":"桂林",
              "children":
              [
                {"name":"秀峰区"},
                {"name":"叠彩区"},
                {"name":"象山区"},
                {"name":"七星区"}
              ]
            },
            {"name":"南宁"},
            {"name":"柳州"},
            {"name":"防城港"}
          ]
        },
    
        {
          "name":"黑龙江",
          "children":
          [
            {"name":"哈尔滨"},
            {"name":"齐齐哈尔"},
            {"name":"牡丹江"},
            {"name":"大庆"}
          ]
        },
    
        {
          "name":"新疆" ,
          "children":
          [
            {"name":"乌鲁木齐"},
            {"name":"克拉玛依"},
            {"name":"吐鲁番"},
            {"name":"哈密"}
          ]
        }
      ]
    }

    HTNL文件程序:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>D3Study</title>
        <script type="text/javascript"src="D3/d3.min.js"></script>
        <style>
            
            .MyText {
                fill: white;
                text-anchor: middle;
            }
           
    
        </style>
    
    </head>
    <body>
    
    <div id="tree" style="height: 400px;background-color:beige"></div>
    </body>
    
    <script type="text/javascript" src="D3/Tree.js"></script>
    </html>


    JS文件程序:

    /**
     * Created by sdy on 2017/1/23.
     */
    var width = 400,
        height = 400;
    
    var tree = d3.layout.tree()
        .size([width, height-200])
        .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });
    
    var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });
    
    var svg4 = d3.select("#tree").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(40,0)");
    
    
    
    d3.json("Data/TreeData.json", function(error, root) {
    
        var nodes = tree.nodes(root);
        var links = tree.links(nodes);
    
        console.log(nodes);
        console.log(links);
    
        var link = svg4.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", diagonal);
    
        var node = svg4.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
    
        node.append("circle")
            .attr("r", 4.5);
    
        node.append("text")
            .attr("dx", function(d) { return d.children ? -8 : 8; })
            .attr("dy", 3)
            .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
            .text(function(d) { return d.name; });
    });
    


    最终效果:



    更多相关内容
  • Vuejs + D3可缩放树状图 在Vuejs中将更新为d3v4的实现。 演示版 是的。 。 依存关系 (> = 4.x,首选6.x)和npm 3+版本。 (6.x) 构建设置 # install dependencies npm install # serve with hot reload at ...
  • 本示例是基于Typescript 和 D3 五版本绘制树状图。 网上绝大多数都是D3 3版本,四版本也有一些示例,比较少,5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例: 直接上代码: /** * create by yanle * ...

    本示例是基于Typescript 和 D3 五版本绘制树状图。

    网上绝大多数都是D3 3版本,四版本也有一些示例,比较少,5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例:

    直接上代码:

    /**
     * create by yanle
     * create time 2018-10-30 15:21
     */
    import {hierarchy, tree} from "d3-hierarchy";
    import {DefaultLinkObject, line, Link, linkHorizontal, linkVertical} from "d3-shape";
    import {select, selectAll} from "d3-selection";
    
    class Demo8 {
        private treeData: any = {
            "name": "中国",
            "children":
                [
                    {
                        "name": "浙江",
                        "children":
                            [
                                {"name": "杭州"},
                                {"name": "宁波"},
                                {"name": "温州"},
                                {"name": "绍兴"}
                            ]
                    },
    
                    {
                        "name": "广西",
                        "children":
                            [
                                {
                                    "name": "桂林",
                                    "children":
                                        [
                                            {"name": "秀峰区"},
                                            {"name": "叠彩区"},
                                            {"name": "象山区"},
                                            {
                                                "name": "七星区",
                                                "children":
                                                    [
                                                        {"name": "哈尔滨"},
                                                        {"name": "齐齐哈尔"},
                                                        {"name": "牡丹江"},
                                                        {"name": "大庆"}
                                                    ]
                                            }
                                        ]
                                },
                                {"name": "南宁"},
                                {"name": "柳州"},
                                {"name": "防城港"}
                            ]
                    },
    
                    {
                        "name": "黑龙江",
                        "children":
                            [
                                {"name": "哈尔滨"},
                                {"name": "齐齐哈尔"},
                                {"name": "牡丹江"},
                                {"name": "大庆"}
                            ]
                    },
    
                    {
                        "name": "新疆",
                        "children":
                            [
                                {"name": "乌鲁木齐"},
                                {"name": "克拉玛依"},
                                {"name": "吐鲁番"},
                                {"name": "哈密"}
                            ]
                    }
                ]
        };
    
        main() {
            let width: number = 900;
            let height: number = 1400;
            let treeWidth: number = width - 50;
            let treeHeight: number = height - 50;
    
            let treeMain = tree()
                .size([width, treeWidth - 300])
                .separation(function (a, b) {
                    return (a.parent === b.parent) ? 1 : 2
                });
    
    
            const hierarchyData = hierarchy(this.treeData).sum(function (d) {
                return d.value
            });
    
            // 这样写是为了 让数据横向显示 x, y 互换
            const renderLink: Link<any, DefaultLinkObject, [number, number]> = linkHorizontal().x(function (d: any) {
                return d.y
            }).y(function (d: any) {
                return d.x
            });
    
            const lineMain = line();
    
            // 创建svg
            let svg = select('body')
                .append('svg')
                .attr('width', treeWidth)
                .attr('height', treeHeight)
                .append('g')
                .attr('transform', 'translate(40, 0)');
    
            let g = svg.append('g').attr('transform', 'translate(40, 40)');
    
    
            treeMain(hierarchyData);
            const nodes = hierarchyData.descendants();
            const links = hierarchyData.links();
    
    
            // 绘制线
            g.selectAll('.link')
                .data(links)
                .enter()
                .append('path')
                .attr('class', 'link')
                .attr("fill", "none")                           // 这个是取消默认填充色
                .attr("stroke", "#000")                         // 给与一个自己的 外框填充色
                .attr('d', function (d: any) {
                    return renderLink(d)
                });
    
            // 绘制节点
            g.selectAll('.node')
                .data(nodes)
                .enter()
                .append('g')
                .attr('class', 'node')
                .attr('transform', function (d: any) {              // 这样写是为了 让数据横向显示
                    return `translate(${d.y}, ${d.x})`
                });
            g.selectAll('.node')
                .append('circle')
                .attr('r', 5)
                .attr('fill', 'green');
    
            // 绘制文字
            g.selectAll('.node')
                .append('text')
                .attr('dy', 3)
                .attr('x', function (d: any) {
                    return d.children ? -8 : 8;
                })
                .attr('text-anchor', function (d: any) {
                    return d.children ? 'end' : 'start'
                })
                .text(function (d: any) {
                    return d.data.name
                })
                .style('font-size', '18px')
        }
    }
    
    export default Demo8;

     

    相关api介绍:

    api | 说明
    :- | :- 
    **d3.hierarchy** | **从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性.**
    node.ancestors | 从当前节点开始返回其祖先节点数组.
    node.descendants | 从当前节点开始返回其后代节点数组.
    node.leaves | 返回当前节点为根节点的子树的叶节点.
    node.path | 返回从当前节点到指定目标节点的最短路径.
    node.links | 返回当前节点所在子树的所有边.
    node.sum | 评估和汇总定量值.
    node.sort | 排序所有的后代兄弟节点.
    node.count | 统计叶节点的个数.
    node.each | 广度优先遍历当前子树.
    node.eachAfter | 后续遍历当前子树.
    node.eachBefore | 前序遍历当前子树.
    node.copy | 拷贝一个当前节点为根节点的子树的副本.
    **d3.stratify** | **创建一个新的分层操作.**
    stratify | 根据扁平数据创建一个分层数据.
    stratify.id | 设置节点 id 访问器.
    stratify.parentId | 设置父节点 id 访问器.
    **d3.cluster** | **创建一个新的集群(系统树图)布局.**
    cluster | 将指定的数据布局为系统树图.
    cluster.size | 设置布局尺寸.
    cluster.nodeSize | 设计节点尺寸.
    cluster.separation | 设置两个叶节点之间的间距.
    **d3.tree** | **创建一个新的整齐(同深度节点对齐)的树布局.**
    tree | 将指定的层次数据布局为整齐的树布局.
    tree.size | 设置布局尺寸.
    tree.nodeSize | 设置节点尺寸.
    tree.separation | 设置两个相邻的节点之间的间距.

     

    具体项目请见github: https://github.com/yanlele/D3.js-learning

    展开全文
  • d3 中,绘制树状图,要用到层级布局这个概念: d3.hierarchy(data[, children]) 根据指定的层次结构数据构造一个根节点。指定的数据 data 必须为一个表示根节点的对象。比如: { "name": "Eve", "children": [ ...

    树状图

    在d3 中,绘制树状图,要用到层级布局这个概念:

    d3.hierarchy(data[, children])
    

    根据指定的层次结构数据构造一个根节点。指定的数据 data 必须为一个表示根节点的对象。比如:

    {
      "name": "Eve",
      "children": [
        {
          "name": "Cain"
        },
        {
          "name": "Seth",
          "children": [
            {
              "name": "Enos"
            },
            {
              "name": "Noam"
            }
          ]
        },
        {
          "name": "Abel"
        },
        {
          "name": "Awan",
          "children": [
            {
              "name": "Enoch"
            }
          ]
        },
        {
          "name": "Azura"
        }
      ]
    }
    

    指定的 children 访问器会为每个数据进行调用,从根 data 开始,并且必须返回一个数组用以表示当前数据的子节点,返回 null 表示当前数据没有子节点。如果没有指定 children 则默认为:

    function children(d) {
      return d.children;
    }
    

    返回的节点和每一个后代会被附加如下属性:

    在这里插入图片描述

    文档:https://www.d3js.org.cn/document/d3-hierarchy/#installing

    其中,

    • node.descendants():返回后代节点数组,第一个节点为自身,然后依次为所有子节点的拓扑排序
    • node.links():返回当前 nodelinks 数组, 其中每个 link 是一个定义了 sourcetarget 属性的对象。每个 linksource 为父节点, target 为子节点。

    同时,需要和tree生成器一起使用,来得到绘制树所需要的节点数据和边数据。

    文档: https://www.d3js.org.cn/document/d3-hierarchy/#tree

    其中,

    • d3.tree(),创建一个树状图生成器,使用默认的设置创建一个新的树布局

    • d3.tree().size([size]),定义树的大小。如果指定了 size 则设置当前系统树布局的尺寸为一个指定的二元数值类型数组,表示 [width, height] 并返回当前树布局。如果 size 没有指定则返回当前系统树布局的尺寸,默认为 [1, 1]。如果返回的布局尺寸为 null 时则表示实际的尺寸根据 node size 确定。

    • d3.tree.nodeSize([size]),如果指定了 size 则设置系统树布局的节点尺寸为指定的数值二元数组,表示为 [width, height] 并返回当前树布局。如果没有指定 size 则返回当前节点尺寸,默认为 null。如果返回的尺寸为 null 则表示使用 layout size 来自动计算节点大小。当指定了节点尺寸时,根节点的位置总是位于 ⟨0, 0⟩。

    • d3.tree().separation([separation]),定义邻居节点的距离。如果指定了 seperation, 则设置间隔访问器为指定的函数并返回当前树布局。如果没有指定 seperation 则返回当前的间隔访问器,默认为:

      function separation(a, b) {
        return a.parent == b.parent ? 1 : 2;
      }
      
      

      一种更适合于径向布局的变体,可以按比例缩小半径差距:

      function separation(a, b) {
        return (a.parent == b.parent ? 1 : 2) / a.depth;
      }
      

      间隔访问器用来设置相邻的两个节点之间的间隔。

    绘制

    1. 数据准备

    //定义边界	
    	var marge = {top:50, bottom:0, left:10, right:0};	
    	var svg = d3.select("svg");
    	var width = svg.attr("width");
    	var height = svg.attr("height");
    	
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    	
    	var scale = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    	//数据
    	var dataset = {
    		name:"中国",
    		children:[
    			{
    				name:"浙江",
    				children:[
    					{name:"杭州" ,value:100},
    					{name:"宁波",value:100},
            			{name:"温州",value:100},
            			{name:"绍兴",value:100}
    				]
    			},
    			{
    				name:"广西",
    				children:[
    					{
    						name:"桂林",
    						children:[
    							{name:"秀峰区",value:100},
                				{name:"叠彩区",value:100},
                				{name:"象山区",value:100},
               					{name:"七星区",value:100}
    						]
    					},
    					{name:"南宁",value:100},
            			{name:"柳州",value:100},
            			{name:"防城港",value:100}
    				]
    			},
    			{
    				name:"黑龙江",
    				children:[
    					{name:"哈尔滨",value:100},
            			{name:"齐齐哈尔",value:100},
            			{name:"牡丹江",value:100},
            			{name:"大庆",value:100}
    				]
    			},
    			{
    				name:"新疆" , 
        			children:
        			[
    		            {name:"乌鲁木齐"},
    		            {name:"克拉玛依"},
    		            {name:"吐鲁番"},
    		            {name:"哈密"}
        			]
    			}
    		]
    	};
    

    2. 创建层级布局

    var hierarchyData = d3.hierarchy(dataset)
      .sum(function(d){
      return d.value;
    });
    

    3. 创建一个树状图

    //创建一个树状图
    var tree = d3.tree()
    .size([width-400,height-200])
    .separation(function(a,b){
    return (a.parent==b.parent?1:2)/a.depth;
    }) 
    

    4. 初始化树状图,也就是传入数据,并得到绘制树基本数据

    var treeData = tree(hierarchyData);
    
    var nodes = treeData.descendants();
    var links = treeData.links();
    

    5. 创建一个贝塞尔生成曲线生成器

    var Bézier_curve_generator = d3.linkHorizontal()
        		.x(function(d) { return d.y; })
        		.y(function(d) { return d.x; });
    

    6. 绘制边

    //绘制边
    g.append("g")
    .selectAll("path")
    .data(links)
    .enter()
    .append("path")
    .attr("d",function(d){
    var start = {x:d.source.x,y:d.source.y};
    var end = {x:d.target.x,y:d.target.y};
    return Bézier_curve_generator({source:start,target:end});
        		})
        		.attr("fill","none")
        		.attr("stroke","yellow")
        		.attr("stroke-width",1);
    

    注意,attr(“d”,function(d)这个函数第二个参数的格式要求。

    7. 常规:建立用来放在每个节点和对应文字的分组

    var gs = g.append("g")
        		.selectAll("g")
        		.data(nodes)
        		.enter()
        		.append("g")
        		.attr("transform",function(d){
        			var cx = d.x;
        			var cy= d.y;
        			return "translate("+cy+","+cx+")";
        		});
    

    8. 绘制节点和文字

    //绘制节点
      gs.append("circle")
      .attr("r",6)
      .attr("fill","white")
      .attr("stroke","blue")
      .attr("stroke-width",1);
    
      //文字
      gs.append("text")
      .attr("x",function(d){
      	return d.children?-40:8;//如果某节点有子节点,则对应的文字前移
      })
      .attr("y",-5)
      .attr("dy",10)
      .text(function(d){
      	return d.data.name;
      })
    

    在这里插入图片描述

    完整代码

    <body>
        <svg width="1000" height="1000"></svg>
        <script>
          var marge = {top:60,bottom:60,left:60,right:60}
          var svg = d3.select("svg")
          var width = svg.attr("width")
          var height = svg.attr("height")
          var g = svg.append("g").attr("transform","translate("+marge.top+","+marge.left+")");
          var scale = svg.append("g")
          //1. 准备数据
          var dataset = {
    		name:"中国",
    		children:[
    			{
    				name:"浙江",
    				children:[
    					{name:"杭州" ,value:100},
    					{name:"宁波",value:100},
            			{name:"温州",value:100},
            			{name:"绍兴",value:100}
    				]
    			},
    			{
    				name:"广西",
    				children:[
    					{
    						name:"桂林",
    						children:[
    							{name:"秀峰区",value:100},
                				{name:"叠彩区",value:100},
                				{name:"象山区",value:100},
               					{name:"七星区",value:100}
    						]
    					},
    					{name:"南宁",value:100},
            			{name:"柳州",value:100},
            			{name:"防城港",value:100}
    				]
    			},
    			{
    				name:"黑龙江",
    				children:[
    					{name:"哈尔滨",value:100},
            			{name:"齐齐哈尔",value:100},
            			{name:"牡丹江",value:100},
            			{name:"大庆",value:100}
    				]
    			},
    			{
    				name:"新疆" , 
        			children:
        			[
    		            {name:"乌鲁木齐"},
    		            {name:"克拉玛依"},
    		            {name:"吐鲁番"},
    		            {name:"哈密"}
        			]
    			}
    		]
      };
      //2. 创建层级布局
      var hierarchyData = d3.hierarchy(dataset)
        .sum(function(d){
        return d.value;
      });
      //3. 创建一个树状图
      var tree = d3.tree()
      .size([width-400,height-200])
      .separation(function(a,b){
      return (a.parent==b.parent?1:2)/a.depth;
      }) 
      //4. 初始化树状图,也就是传入数据,并得到绘制树基本数据
      var treeData = tree(hierarchyData);
      var nodes = treeData.descendants();
      var links = treeData.links();
      //5. 创建一个贝塞尔生成曲线生成器
      var Bézier_curve_generator = d3.linkHorizontal()
        		.x(function(d) { return d.y; })
            .y(function(d) { return d.x; });
      //6. 绘制边
      g.append("g")
        .selectAll("path")
        .data(links)
        .enter()
        .append("path")
        .attr("d",function(d){
    var start = {x:d.source.x,y:d.source.y};
    var end = {x:d.target.x,y:d.target.y};
    return Bézier_curve_generator({source:start,target:end});
        		})
        		.attr("fill","none")
        		.attr("stroke","yellow")
            .attr("stroke-width",1);
      //7. 常规:建立用来放在每个节点和对应文字的分组<g>
      var gs = g.append("g")
        .selectAll("g")
        .data(nodes)
        .enter()
        .append("g")
        .attr("transform",function(d){
          var cx = d.x;
          var cy= d.y;
          return "translate("+cy+","+cx+")";
        });
      //8. 绘制节点和文字
      gs.append("circle")
      .attr("r",6)
      .attr("fill","white")
      .attr("stroke","blue")
      .attr("stroke-width",1);
    
      //文字
      gs.append("text")
      .attr("x",function(d){
      	return d.children?-40:8;//如果某节点有子节点,则对应的文字前移
      })
      .attr("y",-5)
      .attr("dy",10)
      .text(function(d){
      	return d.data.name;
      })
    </script>
    </body>
    

    在这里插入图片描述

    展开全文
  • <template> <div class="d3Chart"></div> </template>... import * as d3 from 'd3'; export default { mounted() { // 源数据 let data = { "name": "中国", ...


    <template>
        <div class="d3Chart"></div>
    </template>
    <script>
        import * as d3 from 'd3';
     
        export default {
            mounted() {
                // 源数据
                let data = {
                    "name": "中国",
                    "children":
                        [
                            {
                                "name": "浙江",
                                "children":
                                    [
                                        {"name": "杭州"},
                                        {"name": "宁波"},
                                        {"name": "温州"},
                                        {"name": "绍兴"}
                                    ]
                            },
                            {
                                "name": "广西",
                                "children":
                                    [
                                        {
                                            "name": "桂林",
                                            "children":
                                                [
                                                    {"name": "秀峰区"},
                                                    {"name": "叠彩区"},
                                                    {"name": "象山区"},
                                                    {"name": "七星区"}
                                                ]
                                        },
                                        {"name": "南宁"},
                                        {"name": "柳州"},
                                        {"name": "防城港"}
                                    ]
                            },
                            {
                                "name": "黑龙江",
                                "children":
                                    [
                                        {"name": "哈尔滨"},
                                        {"name": "齐齐哈尔"},
                                        {"name": "牡丹江"},
                                        {"name": "大庆"}
                                    ]
                            },
                            {
                                "name": "新疆",
                                "children":
                                    [
                                        {"name": "乌鲁木齐"},
                                        {"name": "克拉玛依"},
                                        {"name": "吐鲁番"},
                                        {"name": "哈密"}
                                    ]
                            }
                        ]
                }
                // 画布的参数
                let mapWidth = 600;
                let mapHeight = 600;
                let mapPadding = 20
                // 定义画布—— 外边距 10px
                let svgMap = d3.select(".d3Chart").append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "10px")
                // 定义树状图画布
                let treeMap = svgMap.append("g").attr("transform", "translate(" + mapPadding + "," + mapPadding + ")");
                // 将源数据转换为可以生成树状图的数据(有节点 nodes 和连线 links )
                let treeData = d3.tree()
                // 设置树状图的尺寸
                    .size([mapWidth - 3 * mapPadding, mapHeight - 6 * mapPadding])
                    // 设置树状图节点之间的间隔
                    .separation(function (a, b) {
                        return (a.parent == b.parent ? 1 : 2) / a.depth;
                    })(
                        // 创建层级布局,对源数据进行数据转换
                        d3.hierarchy(data).sum(function (d) {
                            return d.value;
                        })
                    )
                // 贝塞尔曲线生成器
                let Bézier_curve_generator = d3.linkHorizontal()
                    .x(function (d) {
                        return d.y;
                    })
                    .y(function (d) {
                        return d.x;
                    });
                //绘制边
                treeMap.selectAll("path")
                // 节点的关系 links
                    .data(treeData.links())
                    .enter()
                    .append("path")
                    .attr("d", function (d) {
                        // 根据name值的长度调整连线的起点
                        var start = {x: d.source.x, y: d.source.y + d.source.data.name.length * 16 + 12};
                        var end = {x: d.target.x, y: d.target.y};
                        return Bézier_curve_generator({source: start, target: end});
                    })
                    .attr("fill", "none")
                    .attr("stroke", "blue")
                    .attr("stroke-width", 1);
                // 创建分组——节点+文字
                let groups = treeMap.selectAll("g")
                // 节点 nodes
                    .data(treeData.descendants())
                    .enter()
                    .append("g")
                    .attr("transform", function (d) {
                        var cx = d.x;
                        var cy = d.y;
                        return "translate(" + cy + "," + cx + ")";
                    });
                //绘制节点
                groups.append("circle")
                    .attr("r", 2)
                    .attr("fill", "white")
                    .attr("stroke", "red")
                    .attr("stroke-width", 1);
                //绘制文字
                groups.append("text")
                    .attr("x", function (d) {
                        return 8
                    })
                    .attr("y", -5)
                    .attr("dy", 10)
                    .text(function (d) {
                        return d.data.name;
                    })
            }
        }
    </script>
    <style scoped>
    </style>
     
    ————————————————
    版权声明:本文为CSDN博主「朝阳39」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_41192489/article/details/112988335

    展开全文
  • D3实现树状图(vue+v5)

    千次阅读 2019-10-23 22:21:51
    树状图 树状图用于表示层级、上下级、包含与被包含关系 新知识 d3.hierarchy() 层级布局,需要和tree生成器一起使用,来得到绘制树所需要的节点数据和边数据。 d3.hierarchy().sum() 后序遍历,官方API的解释...
  • D3_demo:D3.js绘制的图表

    2021-05-27 08:53:44
    矩形树状图 (treeMapChart) 树图 (treeChart) 封闭图 (enclosureChart) 漏斗图 (funnelChart) 地图 (map) 力图 (force) 河流图 (riverChart) 桑基图 (sanKeyChart) 仪表图 (gauge) 旭日图 (sunburst) 盒须图 ...
  • vue.js中使用D3树状图异步按需加载数据绘制人物关系图,网上查了好多资料没找到合适的,就自己写个简单的,方便以后查看,附上效果图 重点:这个树状图不管是Vue的,还是HTML的,使用的D3.js 版本是3.5.17,如果...
  • d3 树——折叠/展开原理 1. 点击节点前的折叠/展开按钮(此处为红色圆圈)时, 若节点已展开(children有值)——将节点的children数据存入新属性childrenTemp后,将children设为null 若节点已折叠(children无值)...
  • D3.js绘制树形

    千次阅读 2020-06-07 22:41:52
    1、什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型。简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各种属性和变量以图形图表的形式呈现...
  • d3 通过操作 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update、Enter、Exit,感兴趣的可以看官网。本文使用 vue 做数据绑定 总结:使用 d3 提供的 api 计算元素坐标,使用 vue 进行数据...
  • d3.js——树状图绘制

    万次阅读 热门讨论 2016-04-27 13:51:10
    树状图和集群图其实差不多...图(2):树状图——d3.layout.tree() 这样一来差别就看出来了。由于两者的代码差不多,这里就直接附上树状图源码,不多加解释咯~ city.json文件: { "name":"中国", "children":
  •  在本章我们将利用贝塞尔曲线作为树的边,并绘制一个完整的树状图,包括节点、边、文字,在这里我们会用到一个曲线生成器-贝塞尔曲线生成器,看到这里,你是不是应该松一口气了,因为我们在绘制饼状图的时候就用到...
  • 上一篇: 雷达 https://blog.csdn.net/zjw_python/article/details/98480632 下一篇: 树图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍,请先看 ...
  • 可视化工具D3.js教程 入门 (第十三章)—— 树状图 要用到的知识点,如需详细了解,请戳这里查看中文官方文档 d3.hierarchy - 从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性. node.sum - 评估和...
  • 1.什么是多边形树状图? 多边形树状图,它是一种利用嵌套式多边形显示层次结构的方法,同时通过面积大小显示每个类别的数量大小。 多边形树状图采用多边形表示层次结构里的节点,父子节点之间的层次关系用多边形之间...
  • d3.js v3版本实现-树状图

    千次阅读 2018-05-24 15:13:17
    参考的例子:http://bl.ocks.org/robschmuecker/7880033 一、为什么选择d3.js二、d3.js概述三:树状图实现1、创建svg2、在svg元素里面画一个g标签,用于存放树结构3、组织树结构,获取树结构原始数据,d3加工数据1....
  • d3+vue实现一个可折叠的树状图 背景 前两天接到了一个需求,监控系统要实现一个可以折叠展开的树状图来展示完整的接口调用链,同时右侧要展示一些接口的相关信息诸如耗时、调用时间、返回值之类的。 Demo 先在网上...
  • d3.tree(),创建一个树状图生成器 d3.tree().size(),定义树的大小 d3.hierarchy(),层级布局,需要和tree生成器一起使用,来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点,已经经过转换的...
  • 树状图(关系图)

    2021-03-07 04:23:27
    树状图(竖着)d3.json("city.json", function (err, data) {const width = 700, height = 800, padding = {top: 60, left: 30};const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2...
  • D3 绘制 树图(tree) 笔记

    千次阅读 2019-02-22 17:32:20
    绘制一个树形分为四部 选中页面设置的svg绘制区域的宽高 添加g元素 设置位置 生成树状布局,设置尺寸 对角线生成器 请求数据 获取节点数组和连线数组 绘制连线 绘制节点 给节点...
  • d3-绘制直线-横线

    千次阅读 2020-02-02 18:07:28
    d3.js 绘制直线 一世长安乱 svg.append("line") .attr("x1", 20) .attr("y2", 20) .attr("x2", 300) .attr("y2", 100); 但是没有看到任何的直线的毛毛,仔细思考一下,直线是不是一维的东西,没有任何的...
  • 绘制圆形树状图的函数为vt_d3,函数用法如下: vt_d3(data, elementId = NULL, width = NULL, height = NULL, seed = NULL, title = NULL, legend = FALSE, legend_title = NULL, footer = NULL, label...
  • D3力导向树状布局变换

    千次阅读 2017-09-25 11:57:42
    D3力导向树状布局变换d3的力导向是表现关系型数据比较方便且直观的方法,但是会遇到节点比较多且层级关系混乱的情况,这时树状布局就比较方便了,如何不破坏原来结构以最小的代价变换树状布局呢?下面将为大家...
  • 一、弦 1、弦是什么  弦(Chord),主要用于表示两个节点之间的联系的图表。两点之间的连线,表示谁和谁具有联系。 2、数据  初始数据为: var city_name = [ "北京" , "上海" , "...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 579
精华内容 231
关键字:

d3绘制树状图