JavaScript – D3 – Sunburst图表中的转换弧

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了JavaScript – D3 – Sunburst图表中的转换弧，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我在D3中制作了一个日照表.每个“花瓣”表示数据的子集.当用户点击其中一个“花瓣”时,我希望它转换,扇出才能显示该子集(见图)：

我无法正确转换代码.

点击后,所有“花瓣”(除了选定的一个)应该消失,剩下的路径应该沿着圆形动画(使用attrTween,arcTween和interpolate？).将要更改的主要值是angleSize(var angleSize =(2 * Math.PI)/ theData.length;).

我试过使用this,this,this和this作为参考,没有太多的成功.什么是处理动画的最佳方法？

谢谢你的时间！

– >参见Plunker Here.< - 代码如下： 

  1. var colors = {
  2.     'Rank1' : '#3FA548','Rank2' : '#00B09E','Rank3' : '#8971B3','Rank4' : '#DFC423','Rank5' : '#E74341'
  3.   };
  4.  
  5.   var $container = $('.chart'),m = 40,width = $container.width() - m,height = $container.height() - m,r = Math.min(width,height) / 2;
  6.  
  7.   var study = null;
  8.   var arc = d3.svg.arc();
  9.  
  10.   d3.csv('text.csv',ready);
  11.  
  12.   function ready(err,data) {
  13.     if (err) console.warn('Error',err);
  14.  
  15.     var svg = d3.select('.chart')
  16.                 .append('svg')
  17.                 .attr({
  18.                   'width' : (r + m) * 2,'height' : (r + m) * 2,'class' : 'container'
  19.                 })
  20.                 .append('g')
  21.                 .attr('transform','translate(' + (width / 4) + ',' + (height / 2) + ' )'); 
  22.  
  23.     var slice = svg.selectAll('.slice');
  24.  
  25.     function updateChart(study) {
  26.       if (study) {
  27.         var theData = data.filter(function(d) { 
  28.               return d.study_name === study; 
  29.             });
  30.       } else {
  31.         var theData = data;
  32.       }
  33.  
  34.       slice = slice.data(theData);
  35.  
  36.       slice.enter()
  37.            .append('g')
  38.            .attr('class','slice'); 
  39.  
  40.       var angleSize = (2 * Math.PI) / theData.length; 
  41.  
  42.       var startRadArr = [],endRadArr = [];
  43.  
  44.       for ( var i = 0; i < data.length; i++ ) {
  45.         var startRadius = (width / 20),endRadius = startRadius;
  46.  
  47.         for ( var x = 0; x < 4; x++ ) {
  48.           startRadArr.push(startRadius);
  49.  
  50.           if ( x == 0 ) {
  51.             endRadius += Number(data[i].group1_score) * (width / 500);
  52.           } else if ( x == 1 ) {
  53.             endRadius += Number(data[i].group2_score) * (width / 500);
  54.           } else if ( x == 2 ) {
  55.             endRadius += Number(data[i].group3_score) * (width / 500);
  56.           } else {
  57.             endRadius += Number(data[i].group4_score) * (width / 500);
  58.           }
  59.  
  60.           endRadArr.push(endRadius);
  61.           startRadius = endRadius + 0.3;
  62.         }
  63.       }
  64.  
  65.       var startRadGroup = [],endRadGroup = [];
  66.  
  67.       for (i = 0; i < startRadArr.length; i += 4) { 
  68.         startRadGroup.push(startRadArr.slice(i,i + 4)); 
  69.       }
  70.  
  71.       for (i = 0; i < endRadArr.length; i += 4) { 
  72.         endRadGroup.push(endRadArr.slice(i,i + 4)); 
  73.       }
  74.  
  75.       slice.selectAll('path')
  76.            .remove();
  77.  
  78.       for ( var x = 0; x < 4; x++ ) {
  79.         slice.append('path')
  80.              .attr({
  81.                'class' : function(d,i) {
  82.                  if ( x == 0 ) {
  83.                    return d.group1_class;
  84.                  } else if ( x == 1 ) {
  85.                    return d.group2_class;
  86.                  } else if ( x == 2 ) {
  87.                    return d.group3_class;
  88.                  } else {
  89.                    return d.group4_class;
  90.                  }
  91.                },'company' : function(d,i) { 
  92.                  return d.brand_name; 
  93.                },'cat' : function(d,i) {
  94.                   if ( x == 0 ) {
  95.                    return 'Group1';
  96.                  } else if ( x == 1 ) {
  97.                    return 'Group2';
  98.                  } else if ( x == 2 ) {
  99.                    return 'Group3';
  100.                  } else {
  101.                    return 'Group4';
  102.                  }
  103.                },'study' : function(d,i) { 
  104.                  return d.study_name; 
  105.                },'companyid' : function(d,i) { 
  106.                  return d.brand_id; 
  107.                },'startradius' : function(d,i) {
  108.                  return startRadGroup[i][x];
  109.                },'endradius' : function(d,i) {
  110.                  return endRadGroup[i][x];
  111.                },'startangle' : function(d,i) {
  112.                  return angleSize * i;
  113.                },'endangle' : function(d,i) {
  114.                  return angleSize * (i + 1);
  115.                }
  116.              })
  117.              .on('click',selectStudy);
  118.       }
  119.  
  120.       slice.exit()
  121.            .remove();
  122.  
  123.       slice.selectAll('path')
  124.            .attr({
  125.              'd' : function(d) {
  126.                 return arc({
  127.                   innerRadius : +d3.select(this)[0][0].attributes.startradius.nodeValue,outerRadius : +d3.select(this)[0][0].attributes.endradius.nodeValue,startAngle : +d3.select(this)[0][0].attributes.startangle.nodeValue,endAngle : +d3.select(this)[0][0].attributes.endangle.nodeValue
  128.                 })
  129.               }
  130.            });
  131.     }
  132.  
  133.     function selectStudy(d) {
  134.       study = $(this).attr('study');
  135.       updateChart(study);
  136.     } 
  137.  
  138.     updateChart();
  139.   }

编辑
更新代码(基于this),以包括正确工作的输入,更新和退出模式.仍然不确定过渡.我已经链接的大多数示例都使用类似于d3.interpolate(this._current,a)的东西;在不同的数据之间进行补间.

在这个图表中,this._current和a是相同的,angleSize(var angleSize =(2 * Math.PI)/ theData.length;),startAngle和endAngle是唯一的变化.

解决方法

你的问题是,你不是真正绑定到元素的数据,因此转换是不可能的.我把你的代码搞砸了一点,所以这些数据包含了所有关于起始和结束角度的嵌套信息,所以它可以绑定到每个切片内的路径.

看看这个Plunker：https://plnkr.co/edit/a7cxRplzy66Pc1arM2a9?p=preview

这是修改版本的列表：

  1. var colors = {
  2.     Rank1: '#3FA548',Rank2: '#00B09E',Rank3: '#8971B3',Rank4: '#DFC423',Rank5: '#E74341'
  3. };
  4.  
  5. // Configuration
  6. var $container = $('.chart'),height) / 2;
  7.  
  8. var study = null;
  9.  
  10. var arc = d3.svg.arc();
  11.  
  12. // Load data
  13. d3.csv('text.csv',ready);
  14.  
  15. // Data loaded callback
  16. function ready(err,err);
  17.  
  18.     var svg = d3.select('.chart')
  19.         .append('svg')
  20.         .attr({
  21.             'width': (r + m) * 2,'height': (r + m) * 2,'class': 'container'
  22.         })
  23.         .append('g')
  24.         .attr('transform',' + (height / 2) + ' )');
  25.  
  26.     var slices = svg.selectAll('.slice');
  27.  
  28.     function updateChart(study) {
  29.         var theData = data;
  30.  
  31.         if (study) {
  32.             theData = data.filter(function (d) {
  33.                 return d.study_name === study;
  34.             });
  35.         }
  36.  
  37.         var angleSize = (2 * Math.PI) / theData.length;
  38.  
  39.         theData.forEach(function (item,i) {
  40.             var startRadius = (width / 20),endRadius = startRadius,groupName;
  41.  
  42.             item.paths = [];
  43.  
  44.             for (var g = 0; g < 4; g++) {
  45.                 item.paths[g] = {};
  46.  
  47.                 item.paths[g].startRadius = startRadius;
  48.  
  49.                 groupName = 'group' + (g + 1) + '_score';
  50.  
  51.                 endRadius += Number(item[groupName]) * (width / 500);
  52.  
  53.                 item.paths[g].endRadius = endRadius;
  54.  
  55.                 startRadius = endRadius + 0.3;
  56.             }
  57.         });
  58.  
  59.         // Set the data
  60.         slices = slices.data(theData);
  61.  
  62.         // Enter
  63.         slices.enter()
  64.             .append('g')
  65.             .attr('class','slice');
  66.  
  67.         // Exit
  68.         slices.exit()
  69.             .remove();
  70.  
  71.         // Update
  72.         slices
  73.             .transition()
  74.             .duration(750)
  75.             .each(function (dSlice,iSlice) {
  76.                 var slice = d3.select(this);
  77.  
  78.                 var paths = slice.selectAll('path');
  79.  
  80.                 // Set data
  81.                 paths = paths.data(dSlice.paths);
  82.  
  83.                 // Exit
  84.                 paths.exit()
  85.                     .remove();
  86.  
  87.                 // Enter
  88.                 paths.enter()
  89.                     .append('path')
  90.                     .attr('class','path');
  91.  
  92.                 // Update
  93.                 paths
  94.                     .transition()
  95.                     .attr({
  96.                         'class': function (d,i) {
  97.                             return dSlice['group' + (i + 1) + '_class'];
  98.                         },'company': dSlice.brand_name,'cat': function (d,i) {
  99.                             return 'Group' + (i + 1);
  100.                         },'study': function (d,i) {
  101.                             return dSlice.study_name;
  102.                         },'companyid': function (d,i) {
  103.                             return dSlice.brand_id;
  104.                         },'startradius': function (d,i) {
  105.                             return d.startRadius;
  106.                         },'endradius': function (d,i) {
  107.                             return d.endRadius;
  108.                         },'startangle': function (d,i) {
  109.                             return angleSize * iSlice;
  110.                         },'endangle': function (d,i) {
  111.                             return angleSize * (iSlice + 1);
  112.                         },'d': function (d) {
  113.                             return arc({
  114.                                 innerRadius: +d.startRadius,outerRadius: +d.endRadius,startAngle: +angleSize * iSlice,endAngle: +angleSize * (iSlice + 1) 
  115.                             })
  116.                         }
  117.                     })
  118.                     .duration(750);
  119.  
  120.                 paths.on('click',selectStudy);
  121.             });
  122.  
  123.         function selectStudy(d,i) {
  124.             study = $(this).attr('study');
  125.  
  126.             updateChart(study);
  127.         }
  128.     }
  129.  
  130.     updateChart();
  131. }

正如你所看到的,关键是正确准备数据(假设你的例子中的格式.tsv文件不是最好的选择,但有时我们不能选择我们的数据源…)

然后,通过将片段中的每个节点中的路径生成代码放入片中,可以从函数(d,i){…}回调访问数据,并且每个元素恰好接收相应的数据.

另一个技巧是在路径的回调中使用片数据(通过dSlice和iSlice vars在.each函数中访问).这样,这些路径可以自己消耗这些数据.在这种情况下,公司和study_name属性.

现在为了调整转换并使其更准确,起始属性可以改变.您可以尝试通过在.enter()阶段中为路径设置一些属性.

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作