{"action":"created","issue":{"url":"https://api.github.com/repos/gafish/gafish.github.com/issues/4","repository_url":"https://api.github.com/repos/gafish/gafish.github.com","labels_url":"https://api.github.com/repos/gafish/gafish.github.com/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/gafish/gafish.github.com/issues/4/comments","events_url":"https://api.github.com/repos/gafish/gafish.github.com/issues/4/events","html_url":"https://github.com/gafish/gafish.github.com/issues/4","id":150545622,"number":4,"title":"D3.js 入门教程系列","user":{"login":"gafish","id":1989426,"avatar_url":"https://avatars.githubusercontent.com/u/1989426?v=3","gravatar_id":"","url":"https://api.github.com/users/gafish","html_url":"https://github.com/gafish","followers_url":"https://api.github.com/users/gafish/followers","following_url":"https://api.github.com/users/gafish/following{/other_user}","gists_url":"https://api.github.com/users/gafish/gists{/gist_id}","starred_url":"https://api.github.com/users/gafish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gafish/subscriptions","organizations_url":"https://api.github.com/users/gafish/orgs","repos_url":"https://api.github.com/users/gafish/repos","events_url":"https://api.github.com/users/gafish/events{/privacy}","received_events_url":"https://api.github.com/users/gafish/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2016-04-23T11:19:21Z","updated_at":"2016-04-23T11:27:53Z","closed_at":null,"body":"## 1、初识D3\r\n\r\nD3是指数据驱动文档（Data-Driven Documents），根据D3的官方定义：\r\n\r\n    D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。----D3维基（2013年8月）\r\n\r\n从一个Hello Wordld示例来看看d3如何运行 [点击查看在线DEMO](http://gafish.github.io/demo/d3/helloworld.html)\r\n\r\n````\r\n  function render(data){\r\n    var demo = d3.select('body')\r\n        .selectAll('p')\r\n        .data(data, function (d) {\r\n          return d;\r\n        });\r\n    demo.enter()\r\n        .append('p')\r\n        .style('width', 0+'px')\r\n        .style('background', '#eee')\r\n    demo\r\n        .text(function (d) {\r\n          return d;\r\n        })\r\n        .transition()\r\n        .duration(1000)\r\n        .style('width', function (d) {\r\n          return d+'px';\r\n        })\r\n    demo.exit()\r\n        .transition()\r\n        .duration(1000)\r\n        .style('width', 0+'px')\r\n        .remove();\r\n  }\r\n\r\n  render([100,300,500]);\r\n\r\n  setTimeout(function(){\r\n    render([300,500,1000]);\r\n  },1000)\r\n\r\n````\r\n通过链式风格的方式让整个运行步骤非常清晰，D3的API设计跟我们平时用的Jquery很像，所以理解起来比较容易。\r\nHello World示例展示了数据如何驱动页面展示，在render方法里通过数据的变化，它做到了`初始化新数据`，`更新已有数据`，`删除无效数据`这样一个完整的环节；"},"comment":{"url":"https://api.github.com/repos/gafish/gafish.github.com/issues/comments/213723844","html_url":"https://github.com/gafish/gafish.github.com/issues/4#issuecomment-213723844","issue_url":"https://api.github.com/repos/gafish/gafish.github.com/issues/4","id":213723844,"user":{"login":"gafish","id":1989426,"avatar_url":"https://avatars.githubusercontent.com/u/1989426?v=3","gravatar_id":"","url":"https://api.github.com/users/gafish","html_url":"https://github.com/gafish","followers_url":"https://api.github.com/users/gafish/followers","following_url":"https://api.github.com/users/gafish/following{/other_user}","gists_url":"https://api.github.com/users/gafish/gists{/gist_id}","starred_url":"https://api.github.com/users/gafish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gafish/subscriptions","organizations_url":"https://api.github.com/users/gafish/orgs","repos_url":"https://api.github.com/users/gafish/repos","events_url":"https://api.github.com/users/gafish/events{/privacy}","received_events_url":"https://api.github.com/users/gafish/received_events","type":"User","site_admin":false},"created_at":"2016-04-23T11:27:53Z","updated_at":"2016-04-23T11:27:53Z","body":"## 14、D3布局-打包图\r\n\r\n# d3.layout.pack()\r\n\r\n打包图用于表示包含与被包含的关系，也可表示各对象的权重，通常用一圆套一圆来表示前者，用圆的大小来表示后者。\r\n\r\n#### 打包图(Pack)的API说明\r\n\r\n* pack.children - 取得或设置子节点的访问器。\r\n* pack.links - 计算树节点中的父子链接。\r\n* pack.nodes - 计算包布局并返回节点数组。\r\n* pack.padding - 指定布局间距（以像素为单位）\r\n* pack.radius - 指定节点半径（不是由值派生来的）\r\n* pack.size - 指定布局尺寸。\r\n* pack.sort - 控制兄弟节点的遍历顺序。\r\n* pack.value - 取得或设置用于圆尺寸的值访问器。\r\n* pack - pack.nodes的别名。\r\n\r\n我们通过一个制作一个打包图来讲解打包布局。\r\n\r\n![](https://img.alicdn.com/tps/TB1innXKFXXXXbRXXXXXXXXXXXX-400-180.png)\r\n\r\n## 1. 数据\r\n\r\n```\r\nvar dataset = {\r\n    \"name\": \"中国\",\r\n    \"children\": [{\r\n            \"name\": \"浙江\",\r\n            \"children\": [{\"name\": \"杭州\"}, {\"name\": \"宁波\"}, {\"name\": \"温州\"}, {\"name\": \"绍兴\"}]\r\n        },\r\n\r\n        {\r\n            \"name\": \"广西\",\r\n            \"children\": [{\"name\": \"桂林\"}, {\"name\": \"南宁\"}, {\"name\": \"柳州\"}, {\"name\": \"防城港\"}]\r\n        },\r\n\r\n        {\r\n            \"name\": \"黑龙江\",\r\n            \"children\": [{\"name\": \"哈尔滨\"}, {\"name\": \"齐齐哈尔\"}, {\"name\": \"牡丹江\"}, {\"name\": \"大庆\"}]\r\n        },\r\n\r\n        {\r\n            \"name\": \"新疆\",\r\n            \"children\": [{\"name\": \"乌鲁木齐\"}, {\"name\": \"克拉玛依\"}, {\"name\": \"吐鲁番\"}, {\"name\": \"哈密\"}]\r\n        }\r\n    ]\r\n}\r\n```\r\n\r\n## 2. 数据转换\r\n```\r\nvar width = 500;\r\nvar height = 500;\r\n\r\nvar pack = d3.layout.pack()\r\n    .size([width, height])\r\n    .radius(20);\r\n\r\nvar nodes = pack.nodes(data);\r\nvar links = pack.links(nodes);\r\n\r\n```\r\n分别将数据转换成了结点 nodes 和 连线 links。\r\n这里只需要用到结点数据，数据被转换成了如下：\r\n\r\n![](https://img.alicdn.com/tps/TB1SIa3KFXXXXcTXFXXXXXXXXXX-195-269.png)\r\n\r\n## 3. 绘制图形\r\n\r\n#### 生成SVG容器\r\n```\r\nvar svg = d3.select(\"body\").append(\"svg\")\r\n    .attr(\"width\", width)\r\n    .attr(\"height\", height)\r\n    .append(\"g\")\r\n    .attr(\"transform\", \"translate(0,0)\");\r\n```\r\n\r\n#### 生成打包圆形SVG\r\n```\r\nsvg.selectAll(\"circle\")\r\n    .data(nodes)\r\n    .enter()\r\n    .append(\"circle\")\r\n    .attr(\"fill\", \"rgb(31, 119, 180)\")\r\n    .attr(\"fill-opacity\", \"0.4\")\r\n    .attr(\"cx\", function(d) {\r\n        return d.x;\r\n    })\r\n    .attr(\"cy\", function(d) {\r\n        return d.y;\r\n    })\r\n    .attr(\"r\", function(d) {\r\n        return d.r;\r\n    })\r\n    .on(\"mouseover\", function(d, i) {\r\n        d3.select(this)\r\n            .attr(\"fill\", \"yellow\");\r\n    })\r\n    .on(\"mouseout\", function(d, i) {\r\n        d3.select(this)\r\n            .attr(\"fill\", \"rgb(31, 119, 180)\");\r\n    });\r\n```\r\n\r\n#### 生成节点文本\r\n```\r\nsvg.selectAll(\"text\")\r\n    .data(nodes)\r\n    .enter()\r\n    .append(\"text\")\r\n    .attr(\"font-size\", \"10px\")\r\n    .attr(\"fill\", \"white\")\r\n    .attr(\"fill-opacity\", function(d) {\r\n        if (d.depth == 2)\r\n            return \"0.9\";\r\n        else\r\n            return \"0\";\r\n    })\r\n    .attr(\"x\", function(d) {\r\n        return d.x;\r\n    })\r\n    .attr(\"y\", function(d) {\r\n        return d.y;\r\n    })\r\n    .attr(\"dx\", -12)\r\n    .attr(\"dy\", 1)\r\n    .text(function(d) {\r\n        return d.name;\r\n    });\r\n```\r\n\r\n[查看在线演示](http://gafish.github.com/demo/d3/pack.html)"}}