Question

我正在玩不同类型的信息图表-我有一个和弦图的概念-像一个毛线球-您可能拥有2组数据-例如技能和体验圆的相对两端-然后使用“字符串” /线条-标记一个人根据他们的经验水平所具备的技能-字符串/线条合并到图表的底部，也许显示该人的照片等..

我最近将其从d3v3升级到了v4。

我有兴趣清理此代码库-也许还要添加一些动画-如果它首先是补间图表的方面-那么这些线就一一画了吗？对于此图表，我乐于接受有趣的改进/改进-如果给它更多的方面将对一个人有用，例如技能，经验，工作场所-

在此示例中，要使组分离出来-我必须操纵输入数据以添加GAPS-然后消除对绘制标签和指针的影响。

            var id = 0;
            var d = [];

            var totalDataSpread = 0;
            $.each(data, function(index, value) {
              totalDataSpread += value.set.length;
            });

            console.log("totalDataSpread", totalDataSpread);

            $.each(data, function(index, value) {

              var segmentTotal = value.set.length;
              $.each(value.set, function(i, v) {
                d.push({
                  group: value.group,
                  label: v,
                  id: id++,
                  value: 1 // ((segmentTotal/totalDataSpread)*10) 
                });
              });

              var gapSize = 10;
              if (segmentTotal > 10) {
                gapSize = 20;
              }

              //console.log("create GAP", value.set);
              d.push({
                group: "gap",
                label: "gap " + id,
                id: -1,
                value: gapSize
              });

            });



            data = d;

笔记

此重构中是否有更简化的方法-例如映射或图表架构中我错过的东西。 -我应该在伪造“空白”的饼图基础上使用-还是要真正解决产生相互排斥的弧线的问题？然后可能没有出现“间隙”弧，因此看起来更像是两个相对的弧

d3v4-和弦图表重构和增强

0 个答案: