d3.js pie _shimizu 关注 2015-11-17 21:52:31 许可证： MIT许可证 派生1 收藏2 浏览量8874 播放 停止 刷新 全屏查看 智能机大小查看 派生树 Readme JavaScript 67 行 HTML 2 行 CSS 7 行 http://shimz.me/blog/d3-js/2652 d3.js pie D3 Helper Function var w = d3.select('body').style('width').replace('px', '') - 20; var h = d3.select('body').style('height').replace('px', '') - 20; var r = Math.floor(w/2); var color = d3.scale.linear().domain([0, 89, 90, 100]).range(["#ccccFF", "#6666FF", "#FF2222", "#FF2222"]) var textColor = d3.scale.linear().domain([0, 80, 81, 100]).range(["#FFF", "#FFF", "#000", "#000"]) var rmdObj = function(){ return {"value":R(100) } } var dataSet = createData.curry(rmdObj); var data = dataSet(5); var svg = d3.select('svg'); var arcsGroup = svg .data([data]) //pieで変換するために要素１の配列としてデータを渡す .append("svg:g") .attr("transform", "translate(" + Math.floor(w/2) + "," + Math.floor(h/2) + ")") var pie = d3.layout.pie().value(function(d) { return d.value; }); //値からstartAngle,endAngleを生成する var arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r/2)); //starAnge,endAngleからd要素を生成する var pathStyle = { fill: F('value', color), d: arc } //円グラフ作成 var sliceGroup = arcsGroup.selectAll("g.slice") .data(pie) .enter() .append("svg:g") .attr("class", "slice"); var slicePaths = sliceGroup.append("svg:path") .attr(pathStyle) //テキスト表示 var textStyle = { "transform":function(d) { d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; }, fill:F('value', textColor), "text-anchor":"middle" } var text = sliceGroup.append("svg:text") .attr(textStyle) .attr("text-anchor", "middle") .text(F('value')); setInterval(update, 2000); svg.on('click', update); function update(){ arcsGroup.data([dataSet(5)]); sliceGroup.data(pie); slicePaths.data(pie).transition().attr(pathStyle).duration(1000); text.data(pie).text(F('value')).transition().attr(textStyle) }; <script src="http://d3js.org/d3.v3.js"></script> <svg></svg> d3.js pie html,body, svg { width:100%; height:100%; } body { background-color:black; } http://shimz.me/blog/d3-js/2652 var w = d3.select('body').style('width').replace('px', '') - 20; var h = d3.select('body').style('height').replace('px', '') - 20; var r = Math.floor(w/2); var color = d3.scale.linear().domain([0, 89, 90, 100]).range(["#ccccFF", "#6666FF", "#FF2222", "#FF2222"]) var textColor = d3.scale.linear().domain([0, 80, 81, 100]).range(["#FFF", "#FFF", "#000", "#000"]) var rmdObj = function(){ return {"value":R(100) } } var dataSet = createData.curry(rmdObj); var data = dataSet(5); var svg = d3.select('svg'); var arcsGroup = svg .data([data]) //pieで変換するために要素１の配列としてデータを渡す .append("svg:g") .attr("transform", "translate(" + Math.floor(w/2) + "," + Math.floor(h/2) + ")") var pie = d3.layout.pie().value(function(d) { return d.value; }); //値からstartAngle,endAngleを生成する var arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r/2)); //starAnge,endAngleからd要素を生成する var pathStyle = { fill: F('value', color), d: arc } //円グラフ作成 var sliceGroup = arcsGroup.selectAll("g.slice") .data(pie) .enter() .append("svg:g") .attr("class", "slice"); var slicePaths = sliceGroup.append("svg:path") .attr(pathStyle) //テキスト表示 var textStyle = { "transform":function(d) { d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; }, fill:F('value', textColor), "text-anchor":"middle" } var text = sliceGroup.append("svg:text") .attr(textStyle) .attr("text-anchor", "middle") .text(F('value')); setInterval(update, 2000); svg.on('click', update); function update(){ arcsGroup.data([dataSet(5)]); sliceGroup.data(pie); slicePaths.data(pie).transition().attr(pathStyle).duration(1000); text.data(pie).text(F('value')).transition().attr(textStyle) }; <script src="http://d3js.org/d3.v3.js"></script> <svg></svg> html,body, svg { width:100%; height:100%; } body { background-color:black; } 请使用支持内嵌框架的浏览器 到jsdo.it games上查看 作者信息 分享 嵌入博客 QR二维码 标签 下载 成功！ 描述 是怎样的游戏？ http://shimz.me/blog/d3-js/2652 控制设备 智能机遥控器 jsdo.it WebSocket Controller» 鼠标 键盘 触摸设备 全屏 有效 无效 从jsdo.it games上删除 提交 作者信息 _shimizu URLhttp://shimz.me/blog/ 群馬県高崎市在住のエンジニア 。サーバ管理したり、自動組版のスクリプト組んだり、サイト作ったりして生きてます。データビジュアライゼーションとオープンデータにハマってます。Webデザイン ＆ JS勉強中。 I luv javascript! Tweet 默认面板 自动播放 截图 Readme JavaScript HTML CSS 部件尺寸 宽度： px 高度： px 部件代码 <script type="text/javascript" src="http://jsdo.it/blogparts/hhMQ/js"></script> d3.js library&test 讨论区 试着提些关于代码的问题！ 标签 d3.js library&test 收藏用户 yamazakiharu tomato360 派生作品 排序 投稿时间 浏览量 收藏数 派生数 forked: d3.js pie _shimizu 00 2094 101/2/8 d3.js library&test
