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

我在D3中制作了一个日照表.每个“花瓣”表示数据的子集.当用户点击其中一个“花瓣”时,我希望它转换,扇出才能显示该子集(见图)：

我无法正确转换代码.

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

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

谢谢你的时间！

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

var colors = {
    'Rank1' : '#3FA548','Rank2' : '#00B09E','Rank3' : '#8971B3','Rank4' : '#DFC423','Rank5' : '#E74341'
  };

  var $container = $('.chart'),m = 40,width = $container.width() - m,height = $container.height() - m,r = Math.min(width,height) / 2;

  var study = null;
  var arc = d3.svg.arc();

  d3.csv('text.csv',ready);

  function ready(err,data) {
    if (err) console.warn('Error',err);

    var svg = d3.select('.chart')
                .append('svg')
                .attr({
                  'width' : (r + m) * 2,'height' : (r + m) * 2,'class' : 'container'
                })
                .append('g')
                .attr('transform','translate(' + (width / 4) + ',' + (height / 2) + ' )'); 

    var slice = svg.selectAll('.slice');

    function updateChart(study) {
      if (study) {
        var theData = data.filter(function(d) { 
              return d.study_name === study; 
            });
      } else {
        var theData = data;
      }

      slice = slice.data(theData);

      slice.enter()
           .append('g')
           .attr('class','slice'); 

      var angleSize = (2 * Math.PI) / theData.length; 

      var startRadArr = [],endRadArr = [];

      for ( var i = 0; i < data.length; i++ ) {
        var startRadius = (width / 20),endRadius = startRadius;

        for ( var x = 0; x < 4; x++ ) {
          startRadArr.push(startRadius);

          if ( x == 0 ) {
            endRadius += Number(data[i].group1_score) * (width / 500);
          } else if ( x == 1 ) {
            endRadius += Number(data[i].group2_score) * (width / 500);
          } else if ( x == 2 ) {
            endRadius += Number(data[i].group3_score) * (width / 500);
          } else {
            endRadius += Number(data[i].group4_score) * (width / 500);
          }

          endRadArr.push(endRadius);
          startRadius = endRadius + 0.3;
        }
      }

      var startRadGroup = [],endRadGroup = [];

      for (i = 0; i < startRadArr.length; i += 4) { 
        startRadGroup.push(startRadArr.slice(i,i + 4)); 
      }

      for (i = 0; i < endRadArr.length; i += 4) { 
        endRadGroup.push(endRadArr.slice(i,i + 4)); 
      }

      slice.selectAll('path')
           .remove();

      for ( var x = 0; x < 4; x++ ) {
        slice.append('path')
             .attr({
               'class' : function(d,i) {
                 if ( x == 0 ) {
                   return d.group1_class;
                 } else if ( x == 1 ) {
                   return d.group2_class;
                 } else if ( x == 2 ) {
                   return d.group3_class;
                 } else {
                   return d.group4_class;
                 }
               },'company' : function(d,i) { 
                 return d.brand_name; 
               },'cat' : function(d,i) {
                  if ( x == 0 ) {
                   return 'Group1';
                 } else if ( x == 1 ) {
                   return 'Group2';
                 } else if ( x == 2 ) {
                   return 'Group3';
                 } else {
                   return 'Group4';
                 }
               },'study' : function(d,i) { 
                 return d.study_name; 
               },'companyid' : function(d,i) { 
                 return d.brand_id; 
               },'startradius' : function(d,i) {
                 return startRadGroup[i][x];
               },'endradius' : function(d,i) {
                 return endRadGroup[i][x];
               },'startangle' : function(d,i) {
                 return angleSize * i;
               },'endangle' : function(d,i) {
                 return angleSize * (i + 1);
               }
             })
             .on('click',selectStudy);
      }

      slice.exit()
           .remove();

      slice.selectAll('path')
           .attr({
             'd' : function(d) {
                return arc({
                  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
                })
              }
           });
    }

    function selectStudy(d) {
      study = $(this).attr('study');
      updateChart(study);
    } 

    updateChart();
  }

编辑
更新代码(基于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

这是修改版本的列表：

var colors = {
    Rank1: '#3FA548',Rank2: '#00B09E',Rank3: '#8971B3',Rank4: '#DFC423',Rank5: '#E74341'
};

// Configuration
var $container = $('.chart'),height) / 2;

var study = null;

var arc = d3.svg.arc();

// Load data
d3.csv('text.csv',ready);

// Data loaded callback
function ready(err,err);

    var svg = d3.select('.chart')
        .append('svg')
        .attr({
            'width': (r + m) * 2,'height': (r + m) * 2,'class': 'container'
        })
        .append('g')
        .attr('transform',' + (height / 2) + ' )');

    var slices = svg.selectAll('.slice');

    function updateChart(study) {
        var theData = data;

        if (study) {
            theData = data.filter(function (d) {
                return d.study_name === study;
            });
        }

        var angleSize = (2 * Math.PI) / theData.length;

        theData.forEach(function (item,i) {
            var startRadius = (width / 20),endRadius = startRadius,groupName;

            item.paths = [];

            for (var g = 0; g < 4; g++) {
                item.paths[g] = {};

                item.paths[g].startRadius = startRadius;

                groupName = 'group' + (g + 1) + '_score';

                endRadius += Number(item[groupName]) * (width / 500);

                item.paths[g].endRadius = endRadius;

                startRadius = endRadius + 0.3;
            }
        });

        // Set the data
        slices = slices.data(theData);

        // Enter
        slices.enter()
            .append('g')
            .attr('class','slice');

        // Exit
        slices.exit()
            .remove();

        // Update
        slices
            .transition()
            .duration(750)
            .each(function (dSlice,iSlice) {
                var slice = d3.select(this);

                var paths = slice.selectAll('path');

                // Set data
                paths = paths.data(dSlice.paths);

                // Exit
                paths.exit()
                    .remove();

                // Enter
                paths.enter()
                    .append('path')
                    .attr('class','path');

                // Update
                paths
                    .transition()
                    .attr({
                        'class': function (d,i) {
                            return dSlice['group' + (i + 1) + '_class'];
                        },'company': dSlice.brand_name,'cat': function (d,i) {
                            return 'Group' + (i + 1);
                        },'study': function (d,i) {
                            return dSlice.study_name;
                        },'companyid': function (d,i) {
                            return dSlice.brand_id;
                        },'startradius': function (d,i) {
                            return d.startRadius;
                        },'endradius': function (d,i) {
                            return d.endRadius;
                        },'startangle': function (d,i) {
                            return angleSize * iSlice;
                        },'endangle': function (d,i) {
                            return angleSize * (iSlice + 1);
                        },'d': function (d) {
                            return arc({
                                innerRadius: +d.startRadius,outerRadius: +d.endRadius,startAngle: +angleSize * iSlice,endAngle: +angleSize * (iSlice + 1) 
                            })
                        }
                    })
                    .duration(750);

                paths.on('click',selectStudy);
            });

        function selectStudy(d,i) {
            study = $(this).attr('study');

            updateChart(study);
        }
    }

    updateChart();
}

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

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

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

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

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

解决方法

猜你在找的JavaScript相关文章