微调哈希以动态创建ZingCharts treemap数组 [英] Fine tuning hash to dynamically create ZingCharts treemap array
本文介绍了微调哈希以动态创建ZingCharts treemap数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
第一：感谢您的阅读，但有很多，它可能会更容易看到它在底部链接的CodePen示例。
我最近问了一个关于如何动态创建树形图的数组的问题，并指向正确的方向。我已经能够对哈希表做一些简单的操作，但是无法弄清如何做最后一步。
目前，树形图有2个级别 ，这样做：
var data = [{color：blue，party：民主 California，value：55}，{color：blue，party：Democratic，text：Oregon，value：7}，{color：red，party：Republican，text： ，value：38}，{color：red，party：Republican，text：Georgia，value：16}，{color：grey，party： value：11}];
var result = data.reduce（function（hash）{
return function（prev，curr）{
if（hash [curr.color]）{
[curr.color] .children.push $ b}
}）;
} 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）），[]）;
现在，我想做的是带来一个额外的标准，并添加另一个级别。例如，在共和党和民主党下，你可能有可能，倾斜和小费的子类别，但是抛弃你不会有任何这些。
这是我要尝试的最终结果：
series：[{
text：Democratic，
style：{backgroundColor：blue}，
children：[{
text：Likely，
style：{backgroundColor：darkblue}，
children：[{
text：Alabama，
value：8，
style： backgroundBolor：darkblue}，
value：14，
style：backgroundColor：darkblue}，
}
}]
}，{
text：Leaning，
style：{backgroundColor：blue}，
children：[{
text：Florida，
value：9，
style：{backgroundColor：blue}，
}，{
text：North Carolina b $ b 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}， [{
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：
style：{backgroundColor：lightred}，
}，{
text：Idaho，
value：12，
style：{backgroundColor ：lightred}，
}]
}]
}，{
text：Toss Up，
style：{backgroundColor：gray }，
children：[{
text：alabama，
value：10，
style：{backgroundColor：grey}，
} ，{
text：New Mexico，
value：14，
style：{backgroundColor：grey}，
}]
}，
]
};
我一直在试图找出如何修改我给出的示例，已经失败了几个小时。我不知道我应该查找什么。我认为在prev.push中的Else语句（第2040行，这里）是调整应该发生，但我不知道如何实现它，我也怀疑我需要改变整个方法。
var result = data.reduce（function（hash）{
return function（prev，curr）{
if（hash [curr.party]）{
console.log ：+ 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 [ 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
}，
：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
- 以下是我的当前验证码
解决方案
早于根据 color 数据我想我们现在可以基于 party 来做。因为有另一个级别添加到树中，所以我们可以基于 category 对其进行分类。
更改 - 请参阅下面的演示：
var data = [{text： 加利福尼亚州，价值：55，颜色：＃000066，party：民主，比较：1，类别：可能}，{text：康涅狄格 ，value：7，color：＃000066，party：民主，比较：1，类别：可能}，{text：科罗拉多州 ：9，color：＃3333CC，party：民主，比较：2，类别：倾斜}，{text：佛罗里达州 ，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 ：Toss-Up，compare：7，category：Toss Up}，{text：Texas，value：11，color：＃666666 ：Toss-Up，compare：7，category：Toss Up}]; var result = data.reduce（function（hash）{return function（prev，curr）{if .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）;
First: Thanks for reading, but there is a lot in this, it may be easier to see it in the CodePen examples that are linked at the bottom.
I recently asked a question about how to dynamically create an array for a treemap, and was pointed in the right direction. I have been able to do some simple manipulation to the hash table, but can't figure out how to do the final step.
Currently the treemap has 2 "levels", that was done like this:
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)), []);
Now, what I'm trying to do is bring an additional criteria and add another level. For example, under "Republican" and "Democratic" you'd have subcategories for "Likely", "Leaning", and "Tipping" but for "Toss Up" you wouldn't have any of those.
Here is the end result that I'm trying to make:
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" },
}]
},
]
};
I have been trying to figure out how to modify the example I was given to do that, but have been failing for hours. I'm not sure what I should be looking up. I think in the Else statement inside the "prev.push" (line 2040 here) is where the adjustment should be happening, but I don't know how to implement it, I also suspect I need to change the whole approach.
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)), []);
To wrap up:
- Here is a CodePen of the basic structure of the goal
- Here is my current code
解决方案
Earlier the classification was being done based on color, seeing your data I guess we can do it based on party now. As there is another level added to the tree, we can classify that based on category.
So there are many changes - see demo below:
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 treemap数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
