微调哈希以动态创建 ZingCharts 树图数组

Question

首先：感谢您的阅读，不过这里面有很多内容，在底部链接的CodePen示例中可能更容易看到。

我最近问了一个关于如何为树图动态创建数组的问题，并指出了正确的方向。我已经能够对散列进行一些简单的操作 table，但不知道如何进行最后一步。

目前树状图有 2 个 "levels"，是这样完成的：

var data=[{color:"blue",party:"Democratic",text:"California",value:55},{color:"blue",party:"Democratic",text:"Oregon",value:7},{color:"red",party:"Republican",text:"Texas",value:38},{color:"red",party:"Republican",text:"Georgia",value:16},{color:"grey",party:"Democratic",text:"Arizona",value:11}];

var result = data.reduce(function(hash) {
  return function(prev, curr) {
    if (hash[curr.color]) {
      hash[curr.color].children.push({
        text: curr.text,
        value: curr.value,
        style: {
          backgroundColor: curr.color
        }
      });
    } else {
      hash[curr.color] = {};
      hash[curr.color].children = hash[curr.color].children || [];
      prev.push({
        text: curr.party,
        style: {
          backgroundColor: curr.color
        },
        children: hash[curr.color].children
      });
      hash[curr.color].children.push({
        text: curr.text,
        value: curr.value,
        style: {
          backgroundColor: curr.color
        }
      });
    }
    return prev;
  };
}(Object.create(null)), []);

现在，我要做的是引入额外的标准并添加另一个级别。例如，在 "Republican" 和 "Democratic" 下，您会有 "Likely"、"Leaning" 和 "Tipping" 的子类别，但对于 "Toss Up" 您不会有任何一个。

这是我试图做出的最终结果：

  series: [{
      text: "Democratic", 
      style: { "backgroundColor": "blue" },
      children: [{ 
        text: "Likely",
        style: { "backgroundColor": "darkblue" },
        children: [{
          text: "Alabama",
          value: 8,
          style: { "backgroundColor": "darkblue" },
        }, {
          text: "New Mexico",
          value: 14,
          style: { "backgroundColor": "darkblue" },
        }]
      }, {
        text: "Leaning",
        style: { "backgroundColor": "blue" },
        children: [{
          text: "Florida",
          value: 9,
          style: { "backgroundColor": "blue" },
        }, {
          text: "North Carolina",
          value: 6,
          style: { "backgroundColor": "blue" },
        }]
      }, {
        text: "Tipping",
        style: { "backgroundColor": "lightblue" },
        children: [{
          text: "Utah",
          value: 4,
          style: { "backgroundColor": "lightblue" },
        }, {
          text: "Idaho",
          value: 5,
          style: { "backgroundColor": "lightblue" },
        }]
      }]
    },

    { text: "Republican",
      style: { "backgroundColor": "red" },
      children: [{
        text: "Likely",
        style: { "backgroundColor": "darkred" },
        children: [{
          text: "alabama",
          value: 13,
          style: { "backgroundColor": "darkred" },
        }, {
          text: "New Mexico",
          value: 14,
          style: { "backgroundColor": "darkred" },
        }]
      }, {
        text: "Leaning",
        style: { "backgroundColor": "red" },
        children: [{
          text: "Florida",
          value: 9,
          style: { "backgroundColor": "red" },
        }, {
          text: "North Carolina",
          value: 6,
          style: { "backgroundColor": "red" },
        }]
      }, {
        text: "Tipping",
        style: { "backgroundColor": "lightred" },
        children: [{
          text: "Utah",
          value: 27,
          style: { "backgroundColor": "lightred" },
        }, {
          text: "Idaho",
          value: 12,
          style: { "backgroundColor": "lightred" },
        }]
      }]
    }, {
      text: "Toss Up",
      style: { "backgroundColor": "grey" },
      children: [{
          text: "alabama",
          value: 10,
          style: { "backgroundColor": "grey" },
        }, {
          text: "New Mexico",
          value: 14,
          style: { "backgroundColor": "grey" },
      }]
    },
  ]
};

我一直在努力弄清楚如何修改给我的示例，但已经失败了几个小时。我不确定我应该查找什么。我认为在 "prev.push"（第 2040 行 here）中的 Else 语句中应该进行调整，但我不知道如何实现它，我也怀疑我需要更改整个方法。

var result = data.reduce(function(hash) {
  return function(prev, curr) {
    if (hash[curr.party]) { 
      console.log("if: " + curr.party + " " + curr.category);
      hash[curr.party].children.push({ 
        text: curr.text,
        value: curr.value,
        style: {
          backgroundColor: curr.color
        }
      });
    }

    else { 
      console.log("else: " + curr.party + " " + curr.category);
      hash[curr.party] = {};
      hash[curr.party].children = hash[curr.party].children || [];

      hash[curr.party].children.push({
        text: curr.text,
        value: curr.value,
        style: {
          backgroundColor: curr.color
        }
      });

      prev.push({
        text: curr.party,
        style: {
          backgroundColor: curr.color
        },
        children: hash[curr.party].children // children: [{ text: curr.category, children: [{ }] }]
      });

      hash[curr.category] = {};
      hash[curr.category].children = hash[curr.category].children || [];
      console.log("category");
      prev.push({
        text: curr.category,
        style: {
          backgroundColor: curr.color
        },
        children: hash[curr.category].children
      });
    }
    return prev;
  };
}(Object.create(null)), []);

总结：

这是一个CodePen of the basic structure of the goal
这是我的 current code

Answer 1

之前分类是根据color进行的，看到你的数据我想我们现在可以根据party来分类了。由于树中添加了另一个级别，我们可以根据 category.

对其进行分类

因此有很多变化 - 请参阅下面的演示：

var data = [{"text":"California","value":55,"color":"#000066","party":"Democratic","compare":1,"category":"Likely"},{"text":"Connecticut","value":7,"color":"#000066","party":"Democratic","compare":1,"category":"Likely"},{"text":"Colorado","value":9,"color":"#3333CC","party":"Democratic","compare":2,"category":"Leaning"},{"text":"Florida","value":29,"color":"#9999FF","party":"Democratic","compare":3,"category":"Tipping"},{"text":"Iowa","value":6,"color":"red","party":"Republican","compare":4,"category":"Likely"},{"text":"Alabama","value":9,"color":"#CC3333","party":"Republican","compare":5,"category":"Leaning"},{"text":"Alaska","value":3,"color":"#FF9999","party":"Republican","compare":6,"category":"Tipping"},{"text":"Arizona","value":11,"color":"#666666","party":"Toss-Up","compare":7,"category":"Toss Up"},{"text":"Texas","value":11,"color":"#666666","party":"Toss-Up","compare":7,"category":"Toss Up"}];

var result = data.reduce(function(hash) {
  return function(prev, curr) {
    if (!hash[curr.party]) {
      hash[curr.party] = {};
      hash[curr.party].children = hash[curr.party].children || [];
      prev.push({
        text: curr.party,
        style: {
          backgroundColor: curr.color
        },
        children: hash[curr.party].children
      });
    } else if (hash[curr.party] && hash[curr.party][curr.category]) {
      hash[curr.party][curr.category].children.push({
        text: curr.text,
        value: curr.value,
        style: {
          backgroundColor: curr.color
        }
      });
    }

    if (hash[curr.party] && !hash[curr.party][curr.category]) {
      if (curr.category == "Toss Up") {
        hash[curr.party].children.push({
          text: curr.text,
          value: curr.value,
          style: {
            backgroundColor: curr.color
          }
        });
      } else {
        hash[curr.party][curr.category] = {};
        hash[curr.party][curr.category].children = hash[curr.party][curr.category].children || [];
        hash[curr.party].children.push({
          text: curr.category,
          style: {
            backgroundColor: curr.color
          },
          children: hash[curr.party][curr.category].children
        });
        hash[curr.party][curr.category].children.push({
          text: curr.text,
          value: curr.value,
          style: {
            backgroundColor: curr.color
          }
        });
      }
    }
    return prev;
  };
}(Object.create(null)), []);

console.log(result);

.as-console-wrapper {top: 0;max-height: 100%!important;}

微调哈希以动态创建 ZingCharts 树图数组

Fine tuning hash to dynamically create ZingCharts treemap array

javascript

arrays

charts

hashmap

zingchart