1
最初：ありがとう、読んでいただきありがとうございますが、これは多くありますが、下部にリンクされているCodePenの例では見やすいかもしれません。ハッシュを細かくチューニングしてZingChartsのツリーマップ配列を動的に作成する
最近、私は、ツリーマップの配列を動的に作成する方法について質問し、正しい方向を指していました。私はハッシュテーブルに対して簡単な操作を行うことができましたが、最終ステップを実行する方法を理解することはできません。
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)), []);
は今、私がやろうとしていると、追加の基準を持参し、別のレベルを追加します：
は現在、ツリーマップは、次のように行われた2「レベル」を、持っています。たとえば、「共和党」と「民主党」の下には、「有望」「傾け」「転倒」のサブカテゴリがありますが、「トスアップ」の場合はそのようなものはありません。私は私がそれを行うために与えられた例を変更する方法を理解しようとしているが、時間のために、故障してきた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"内のElseステートメント（行2040 here）で調整が行われるべきだと思いますが、実装方法はわかりませんが、私は全体のアプローチを変更する必要があると考えています。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)), []);
締めくくりには：
ここ
@NealJonesは、必要に応じて出力ツリーがあるなら、私に知らせて、または私はそれを手直しすることができます。ありがとう！ – kukkuz
ありがとう！私は本当に2回私を助けてくれてありがとう、私はちょうど家に帰った後、これで別の刺しを取っていた、私はこれを試してみるだろうとあなたに知らせる！ –
これは「Toss Up」を除いて私の全テストデータで完璧に動作します。問題は、「トスアップ」は決して有望/傾き/転倒の子供をそれに含まないということです。あなたはこの写真の中で今でも "Toss Up"（http://i.imgur.com/dUJRKM7.png）の第2レベルをやっていることが分かります。また、私はこの新しいCodePenを私の完全なテストデータと一緒に入れて見ています。http://codepen.io/anon/pen/jMgoJa?editors=0010もう一度ありがとう！ –