javascript - D3 检索矩形顶点以附加平行四边形(多边形)
问题描述
我的目标是绘制平行四边形,将一个公司在一个业务季度的排名与其在下一个业务季度的新排名联系起来。我使用 rects 来代表每家公司或manager
. (每列是一个营业季度)。我的步骤/进度:
- 用于通过检索每个矩形的和来
.each()
存储平行四边形顶点。.attr()
x
y
height
- 由于每列的公司顺序不同,我不得不将这些 x 和 y 坐标存储到两个数组中。
- 然后我不得不在 xs 和 ys 属于同一个经理的条件下合并它们。(例如,
Fidelity
在第一列之后从 #1 变为 #2)。
这就是麻烦开始的地方,基本上,我y1
的 s 和y0
s 都停留在相同的值上,我不知道为什么。
var margins = {top:20, bottom:300, left:30, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var outerRadius = (400 / 2);
var innerRadius = 15;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+ ")");
var heightScale = d3.scaleLinear()
.domain([.01,.09])
.range([7,50]);
/*
var tsvData = d3.tsv('market-share-change.tsv');
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return { manager:d.manager, t1:+d.t1, t2:+d.t2, t3:+d.t3}
});
})
*/
var data = [[{'manager': 'Mirae Asset', 'share': 0.016},
{'manager': 'Manulife', 'share': 0.015},
{'manager': 'ChinaAMC', 'share': 0.012},
{'manager': 'Principal', 'share': 0.015},
{'manager': 'Aberdeen Standard', 'share': 0.013},
{'manager': 'CSOP', 'share': 0.015},
{'manager': 'BOCI-Prudential', 'share': 0.019},
{'manager': 'Allianz', 'share': 0.016},
{'manager': 'HSBC', 'share': 0.027},
{'manager': 'Deutsche Bank', 'share': 0.014},
{'manager': 'Invesco', 'share': 0.025},
{'manager': 'First State', 'share': 0.033},
{'manager': 'JP Morgan', 'share': 0.041},
{'manager': 'Value Partners', 'share': 0.04},
{'manager': 'Schroders', 'share': 0.051},
{'manager': 'Hang Seng', 'share': 0.063},
{'manager': 'UBS', 'share': 0.056},
{'manager': 'SSgA', 'share': 0.066},
{'manager': 'Fidelity', 'share': 0.088},
{'manager': 'BlackRock', 'share': 0.084}],
[{'manager': 'Mirae Asset', 'share': 0.013},
{'manager': 'Manulife', 'share': 0.014},
{'manager': 'ChinaAMC', 'share': 0.013},
{'manager': 'Principal', 'share': 0.018},
{'manager': 'Aberdeen Standard', 'share': 0.014},
{'manager': 'CSOP', 'share': 0.019},
{'manager': 'BOCI-Prudential', 'share': 0.02},
{'manager': 'Allianz', 'share': 0.015},
{'manager': 'HSBC', 'share': 0.023},
{'manager': 'Deutsche Bank', 'share': 0.02},
{'manager': 'Invesco', 'share': 0.02},
{'manager': 'First State', 'share': 0.029},
{'manager': 'JP Morgan', 'share': 0.04},
{'manager': 'Value Partners', 'share': 0.039},
{'manager': 'Schroders', 'share': 0.051},
{'manager': 'Hang Seng', 'share': 0.063},
{'manager': 'UBS', 'share': 0.055},
{'manager': 'SSgA', 'share': 0.065},
{'manager': 'Fidelity', 'share': 0.088},
{'manager': 'BlackRock', 'share': 0.101}],
[{'manager': 'Mirae Asset', 'share': 0.012},
{'manager': 'Manulife', 'share': 0.014},
{'manager': 'ChinaAMC', 'share': 0.014},
{'manager': 'Principal', 'share': 0.017},
{'manager': 'Aberdeen Standard', 'share': 0.017},
{'manager': 'CSOP', 'share': 0.018},
{'manager': 'BOCI-Prudential', 'share': 0.018},
{'manager': 'Allianz', 'share': 0.018},
{'manager': 'HSBC', 'share': 0.023},
{'manager': 'Deutsche Bank', 'share': 0.023},
{'manager': 'Invesco', 'share': 0.023},
{'manager': 'First State', 'share': 0.029},
{'manager': 'JP Morgan', 'share': 0.041},
{'manager': 'Value Partners', 'share': 0.044},
{'manager': 'Schroders', 'share': 0.048},
{'manager': 'Hang Seng', 'share': 0.056},
{'manager': 'UBS', 'share': 0.061},
{'manager': 'SSgA', 'share': 0.062},
{'manager': 'Fidelity', 'share': 0.087},
{'manager': 'BlackRock', 'share': 0.096}]];
var poly = [
{'x':0,'y':0},
{'x':0,'y':0}
];
var multiPoly1 = d3.range(20).map(()=>JSON.parse(JSON.stringify(poly)));
var multiPoly2 = d3.range(20).map(()=>JSON.parse(JSON.stringify(poly)));
/*
for (var k=0; k <(data[0].length); k++) {
polyMaster[0][k].push({'manager':data[0][k].manager})
};
*/
var colorMap = {
'Fidelity':"#003366",
'BlackRock':"#366092",
'SSgA':"#4f81b9",
'Hang Seng':"#95b3d7",
'UBS':"#b8cce4",
'Schroders':"#e7eef8",
'JP Morgan':"#a6a6a6",
'Value Partners':"#d9d9d9",
'Yuanta':"#ffffcc",
'First State':"#ffffcc",
'HSBC':'#f6d18b',
'Invesco':'#e4a733',
'BOCI-Prudential':"#b29866",
'Allianz':'#a6a6a6',
'Mirae Asset':'#d9d9d9',
'Manulife':'#e7eef8',
'CSOP':'#b8cce4',
'Principal':'#95b3d7',
'Deutsche Bank':'#4f81b9',
'Aberdeen Standard':'#366092',
'ChinaAMC':'#003366'
};
for (var j=0; j <(data.length); j++) {
var className = "column"+String(j);
let counterRect = 0,
counterText = 0;
var spacing = 170;
var sortedData = data[j].sort(function(a,b) {
return b.share - a.share;
});
var column = graphGroup.selectAll(className)
.data(sortedData)
.attr('class', className)
.enter().append("g");
column.append("rect")
.attr('class','rect'+String(j))
.attr("width", 120)
.attr("height", function(d) {
return heightScale(d.share)
})
.attr('x', function(d) {return j*spacing})
.attr('y', function(d, i) {
let previous = counterRect;
return (counterRect += heightScale(d.share)+2, previous)
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][0].x = 120;
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][0].y = parseFloat(d3.select(this).attr('y'));
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][1].x = 120;
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][1].y = parseFloat(d3.select(this).attr('y'))+parseFloat(d3.select(this).attr('height'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][1].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][1].y = parseFloat(d3.select(this).attr('y'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][0].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][0].y = parseFloat(d3.select(this).attr('y'))+parseFloat(d3.select(this).attr('height'));
}
})
.style('fill',function(d,i) {return colorMap[d.manager]});
column.append("text")
.attr('x', function(d) {return j*spacing+60})
.attr('y', function(d, i) {
let previous = counterText;
return (counterText += heightScale(d.share)+2, previous + (heightScale(d.share)/2))
})
.attr("dominant-baseline", "central")
.attr('text-anchor', 'middle')
.text(function(d) {
return d.manager;
});
var managerList = [];
for (var k = 0; k < sortedData.length; k++)
managerList.push({'manager':sortedData[k].manager});
var tempList1 = [];
for (var k = 0; k < managerList.length; k++)
tempList1.push({'manager': managerList[k], 'x1': multiPoly1[k][0].x, 'y1':multiPoly1[k][0].y, 'x2':multiPoly1[k][1].x, 'y2':multiPoly1[k][1].y });
var tempList2 = [];
for (var k = 0; k < managerList.length; k++)
tempList2.push({'manager': managerList[k], 'x3': multiPoly2[k][1].x, 'y3':multiPoly2[k][1].y, 'x4':multiPoly2[k][0].x, 'y4':multiPoly2[k][0].y });
var combinedList = [];
const list1ByManager = tempList1.reduce((a, item) => {
a[item.manager] = item;
return a;
}, {});
var combinedList = tempList2.map((item2) => ({
...list1ByManager[item2.manager],
...item2
}));
console.log(combinedList)
var polyMaster = [];
for (var k = 0; k < managerList.length; k++) {
var tempItem = [
{'x':combinedList[k].x1, 'y':combinedList[k].y1},
{'x':combinedList[k].x2, 'y':combinedList[k].y2},
{'x':combinedList[k].x3, 'y':combinedList[k].y3},
{'x':combinedList[k].x4, 'y':combinedList[k].y4},
];
polyMaster.push(tempItem);
}
console.log(polyMaster)
};
graphGroup.selectAll("polygon")
.data(polyMaster)
.enter().append("polygon")
.attr("points",function(d) {
return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
.attr("stroke","black")
.attr("stroke-width",2);
<script src="https://d3js.org/d3.v5.min.js"></script>
检查tempList1
并tempList2
在控制台日志中确认我确实正确存储了所有值,但是由于某种原因,当我尝试将这两个数组合并到combinedList
sy
时,没有正确合并。相关代码:
var combinedList = [];
const list1ByManager = tempList1.reduce((a, item) => {
a[item.manager] = item;
return a;
}, {});
var combinedList = tempList2.map((item2) => ({
...list1ByManager[item2.manager],
...item2
}));
问题
我是否合并tempList1
不tempList2
正确?为什么y
s 没有像片段中所示的那样保留?
(换句话说,平行四边形(黑色)不应该全部画在第一列的底部,它们应该完美地连接到相应的公司——如果你愿意,可以形成一座桥梁,让眼睛很容易看到排名通过追踪公司在第一栏中的位置到其在第二栏中的新位置来更改任何一家公司)
注意:我现在只关心第一列和第二列之间的平行四边形。在弄清楚这么多之前,我不会尝试使用第三栏。
解决方案
我找到了一个解决方案,但它很可怕,一点也不简洁。为了时间的缘故,我不得不接受它。我可能很快会重新审视这段代码,我很想看看其他人是否有改进的想法。
最明显的异端代码是通过蛮力填充对象。我一直遇到一个错误,我无法使用理解或 for 循环创建对象。
即使你没有耐心浏览我所有糟糕的代码,你至少可以看到最终的结果——这看起来很酷(如果我这么说的话)。
var margins = {top:20, bottom:300, left:30, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var outerRadius = (400 / 2);
var innerRadius = 15;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+ ")");
var heightScale = d3.scaleLinear()
.domain([.01,.09])
.range([7,50]);
/*
var tsvData = d3.tsv('market-share-change.tsv');
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return { manager:d.manager, t1:+d.t1, t2:+d.t2, t3:+d.t3}
});
})
*/
var data = [[{'manager': 'Mirae Asset', 'share': 0.016},
{'manager': 'Manulife', 'share': 0.015},
{'manager': 'ChinaAMC', 'share': 0.012},
{'manager': 'Principal', 'share': 0.015},
{'manager': 'Aberdeen Standard', 'share': 0.013},
{'manager': 'CSOP', 'share': 0.015},
{'manager': 'BOCI-Prudential', 'share': 0.019},
{'manager': 'Allianz', 'share': 0.016},
{'manager': 'HSBC', 'share': 0.027},
{'manager': 'DWS', 'share': 0.014},
{'manager': 'Invesco', 'share': 0.025},
{'manager': 'First State', 'share': 0.033},
{'manager': 'JP Morgan', 'share': 0.041},
{'manager': 'Value Partners', 'share': 0.04},
{'manager': 'Schroders', 'share': 0.051},
{'manager': 'Hang Seng', 'share': 0.063},
{'manager': 'UBS', 'share': 0.056},
{'manager': 'SSgA', 'share': 0.066},
{'manager': 'Fidelity', 'share': 0.088},
{'manager': 'BlackRock', 'share': 0.084}],
[{'manager': 'Mirae Asset', 'share': 0.013},
{'manager': 'Manulife', 'share': 0.014},
{'manager': 'ChinaAMC', 'share': 0.013},
{'manager': 'Principal', 'share': 0.018},
{'manager': 'Aberdeen Standard', 'share': 0.014},
{'manager': 'CSOP', 'share': 0.019},
{'manager': 'BOCI-Prudential', 'share': 0.02},
{'manager': 'Allianz', 'share': 0.015},
{'manager': 'HSBC', 'share': 0.023},
{'manager': 'DWS', 'share': 0.02},
{'manager': 'Invesco', 'share': 0.02},
{'manager': 'First State', 'share': 0.029},
{'manager': 'JP Morgan', 'share': 0.04},
{'manager': 'Value Partners', 'share': 0.039},
{'manager': 'Schroders', 'share': 0.051},
{'manager': 'Hang Seng', 'share': 0.063},
{'manager': 'UBS', 'share': 0.055},
{'manager': 'SSgA', 'share': 0.065},
{'manager': 'Fidelity', 'share': 0.088},
{'manager': 'BlackRock', 'share': 0.101}],
[{'manager': 'Mirae Asset', 'share': 0.012},
{'manager': 'Manulife', 'share': 0.014},
{'manager': 'ChinaAMC', 'share': 0.014},
{'manager': 'Principal', 'share': 0.017},
{'manager': 'Aberdeen Standard', 'share': 0.017},
{'manager': 'CSOP', 'share': 0.018},
{'manager': 'BOCI-Prudential', 'share': 0.018},
{'manager': 'Allianz', 'share': 0.018},
{'manager': 'HSBC', 'share': 0.023},
{'manager': 'DWS', 'share': 0.023},
{'manager': 'Invesco', 'share': 0.023},
{'manager': 'First State', 'share': 0.029},
{'manager': 'JP Morgan', 'share': 0.041},
{'manager': 'Value Partners', 'share': 0.044},
{'manager': 'Schroders', 'share': 0.048},
{'manager': 'Hang Seng', 'share': 0.056},
{'manager': 'UBS', 'share': 0.061},
{'manager': 'SSgA', 'share': 0.062},
{'manager': 'Fidelity', 'share': 0.087},
{'manager': 'BlackRock', 'share': 0.096}]];
var poly = [
{'x':0,'y':0},
{'x':0,'y':0}
];
var multiPoly1 = d3.range(20).map(()=>JSON.parse(JSON.stringify(poly)));
var multiPoly2 = d3.range(20).map(()=>JSON.parse(JSON.stringify(poly)));
var multiPoly3 = d3.range(20).map(()=>JSON.parse(JSON.stringify(poly)));
/*
for (var k=0; k <(data[0].length); k++) {
polyMaster[0][k].push({'manager':data[0][k].manager})
};
*/
var colorMap = {
'Fidelity':"#003366",
'BlackRock':"#366092",
'SSgA':"#4f81b9",
'Hang Seng':"#95b3d7",
'UBS':"#b8cce4",
'Schroders':"#e7eef8",
'JP Morgan':"#a6a6a6",
'Value Partners':"#d9d9d9",
'Yuanta':"#ffffcc",
'First State':"#ffffcc",
'HSBC':'#f6d18b',
'Invesco':'#e4a733',
'BOCI-Prudential':"#b29866",
'Allianz':'#a6a6a6',
'Mirae Asset':'#d9d9d9',
'Manulife':'#e7eef8',
'CSOP':'#b8cce4',
'Principal':'#95b3d7',
'DWS':'#4f81b9',
'Aberdeen Standard':'#366092',
'ChinaAMC':'#003366'
};
for (var j=0; j <(data.length); j++) {
var className = "column"+String(j);
let counterRect = 0,
counterText = 0;
var spacing = 170;
var sortedData = data[j].sort(function(a,b) {
return b.share - a.share;
});
var column = graphGroup.selectAll(className)
.data(sortedData)
.attr('class', className)
.enter().append("g");
column.append("rect")
.attr('class','rect'+String(j))
.attr("width", 120)
.attr("height", function(d) {
return heightScale(d.share)
})
.attr('x', function(d) {return j*spacing})
.attr('y', function(d, i) {
let previous = counterRect;
return (counterRect += heightScale(d.share)+2, previous)
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][0].x = 120;
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][0].y = parseFloat(d3.select(this).attr('y'));
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][1].x = 120;
}
})
.each(function(d,i) {
if (j==0) {
multiPoly1[i][1].y = parseFloat(d3.select(this).attr('y'))+parseFloat(d3.select(this).attr('height'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][1].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][1].y = parseFloat(d3.select(this).attr('y'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][0].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==1) {
multiPoly2[i][0].y = parseFloat(d3.select(this).attr('y'))+parseFloat(d3.select(this).attr('height'));
}
})
.each(function(d,i) {
if (j==2) {
multiPoly3[i][1].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==2) {
multiPoly3[i][1].y = parseFloat(d3.select(this).attr('y'));
}
})
.each(function(d,i) {
if (j==2) {
multiPoly3[i][0].x = parseFloat(d3.select(this).attr('x'));
}
})
.each(function(d,i) {
if (j==2) {
multiPoly3[i][0].y = parseFloat(d3.select(this).attr('y'))+parseFloat(d3.select(this).attr('height'));
}
})
.style('fill',function(d,i) {return colorMap[d.manager]});
column.append("text")
.attr('x', function(d) {return j*spacing+60})
.attr('y', function(d, i) {
let previous = counterText;
return (counterText += heightScale(d.share)+2, previous + (heightScale(d.share)/2))
})
.attr("dominant-baseline", "central")
.attr('text-anchor', 'middle')
.text(function(d) {
return d.manager;
});
if (j==0) {
var managerList = [];
for (var k = 0; k < sortedData.length; k++)
managerList.push({'manager':sortedData[k].manager});
}
if (j==0) {
var tempList1 = [];
for (var k = 0; k < managerList.length; k++)
tempList1.push({'manager': managerList[k], 'x1': multiPoly1[k][0].x, 'y1':multiPoly1[k][0].y, 'x2':multiPoly1[k][1].x, 'y2':multiPoly1[k][1].y });
}
var tempList2 = [];
for (var k = 0; k < managerList.length; k++)
tempList2.push({'manager': managerList[k], 'x3': multiPoly2[k][1].x, 'y3':multiPoly2[k][1].y, 'x4':multiPoly2[k][0].x, 'y4':multiPoly2[k][0].y });
if (j==2) {
var tempList3 = [];
for (var k = 0; k < managerList.length; k++) {
tempList3.push({'manager': managerList[k], 'x3': multiPoly3[k][1].x, 'y3':multiPoly3[k][1].y, 'x4':multiPoly3[k][0].x, 'y4':multiPoly3[k][0].y });
}
}
//var combinedList = [];
};
var list1Index = {};
var list2Index = {};
var list3Index = {};
var list2Index2 = {};
/*
for (var k = 0; k < managerList.length; k++) {
list1Index[managerList[k]] = {'x1': tempList1[k].x1, 'y1':tempList1[k].y1, 'x2':tempList1[k].x2, 'y2':tempList1[k].y2}
};
*/
list1Index['Fidelity'] = {'x1': tempList1[0].x1, 'y1':tempList1[0].y2, 'x2':tempList1[0].x2, 'y2':tempList1[0].y1};
list1Index['BlackRock'] = {'x1': tempList1[1].x1, 'y1':tempList1[1].y2, 'x2':tempList1[1].x2, 'y2':tempList1[1].y1};
list1Index['SSgA'] = {'x1': tempList1[2].x1, 'y1':tempList1[2].y2, 'x2':tempList1[2].x2, 'y2':tempList1[2].y1};
list1Index['Hang Seng'] = {'x1': tempList1[3].x1, 'y1':tempList1[3].y2, 'x2':tempList1[3].x2, 'y2':tempList1[3].y1};
list1Index['UBS'] = {'x1': tempList1[4].x1, 'y1':tempList1[4].y2, 'x2':tempList1[4].x2, 'y2':tempList1[4].y1};
list1Index['Schroders'] = {'x1': tempList1[5].x1, 'y1':tempList1[5].y2, 'x2':tempList1[5].x2, 'y2':tempList1[5].y1};
list1Index['JP Morgan'] = {'x1': tempList1[6].x1, 'y1':tempList1[6].y2, 'x2':tempList1[6].x2, 'y2':tempList1[6].y1};
list1Index['Value Partners'] = {'x1': tempList1[7].x1, 'y1':tempList1[7].y2, 'x2':tempList1[7].x2, 'y2':tempList1[7].y1};
list1Index['First State'] = {'x1': tempList1[8].x1, 'y1':tempList1[8].y2, 'x2':tempList1[8].x2, 'y2':tempList1[8].y1};
list1Index['HSBC'] = {'x1': tempList1[9].x1, 'y1':tempList1[9].y2, 'x2':tempList1[9].x2, 'y2':tempList1[9].y1};
list1Index['Invesco'] = {'x1': tempList1[10].x1, 'y1':tempList1[10].y2, 'x2':tempList1[10].x2, 'y2':tempList1[10].y1};
list1Index['BOCI-Prudential'] = {'x1': tempList1[11].x1, 'y1':tempList1[11].y2, 'x2':tempList1[11].x2, 'y2':tempList1[11].y1};
list1Index['Allianz'] = {'x1': tempList1[12].x1, 'y1':tempList1[12].y2, 'x2':tempList1[12].x2, 'y2':tempList1[12].y1};
list1Index['Mirae Asset'] = {'x1': tempList1[13].x1, 'y1':tempList1[13].y2, 'x2':tempList1[13].x2, 'y2':tempList1[13].y1};
list1Index['Manulife'] = {'x1': tempList1[14].x1, 'y1':tempList1[14].y2, 'x2':tempList1[14].x2, 'y2':tempList1[14].y1};
list1Index['CSOP'] = {'x1': tempList1[15].x1, 'y1':tempList1[15].y2, 'x2':tempList1[15].x2, 'y2':tempList1[15].y1};
list1Index['Principal'] = {'x1': tempList1[16].x1, 'y1':tempList1[16].y2, 'x2':tempList1[16].x2, 'y2':tempList1[16].y1};
list1Index['DWS'] = {'x1': tempList1[17].x1, 'y1':tempList1[17].y2, 'x2':tempList1[17].x2, 'y2':tempList1[17].y1};
list1Index['Aberdeen Standard'] = {'x1': tempList1[18].x1, 'y1':tempList1[18].y2, 'x2':tempList1[18].x2, 'y2':tempList1[18].y1};
list1Index['ChinaAMC'] = {'x1': tempList1[19].x1, 'y1':tempList1[19].y2, 'x2':tempList1[19].x2, 'y2':tempList1[19].y1};
list2Index['BlackRock'] = {'x3': tempList2[0].x3, 'y3':tempList2[0].y3, 'x4':tempList2[0].x4, 'y4':tempList2[0].y4};
list2Index['Fidelity'] = {'x3': tempList2[1].x3, 'y3':tempList2[1].y3, 'x4':tempList2[1].x4, 'y4':tempList2[1].y4};
list2Index['SSgA'] = {'x3': tempList2[2].x3, 'y3':tempList2[2].y3, 'x4':tempList2[2].x4, 'y4':tempList2[2].y4};
list2Index['Hang Seng'] = {'x3': tempList2[3].x3, 'y3':tempList2[3].y3, 'x4':tempList2[3].x4, 'y4':tempList2[3].y4};
list2Index['UBS'] = {'x3': tempList2[4].x3, 'y3':tempList2[4].y3, 'x4':tempList2[4].x4, 'y4':tempList2[4].y4};
list2Index['Schroders'] = {'x3': tempList2[5].x3, 'y3':tempList2[5].y3, 'x4':tempList2[5].x4, 'y4':tempList2[5].y4};
list2Index['JP Morgan'] = {'x3': tempList2[6].x3, 'y3':tempList2[6].y3, 'x4':tempList2[6].x4, 'y4':tempList2[6].y4};
list2Index['Value Partners'] = {'x3': tempList2[7].x3, 'y3':tempList2[7].y3, 'x4':tempList2[7].x4, 'y4':tempList2[7].y4};
list2Index['First State'] = {'x3': tempList2[8].x3, 'y3':tempList2[8].y3, 'x4':tempList2[8].x4, 'y4':tempList2[8].y4};
list2Index['HSBC'] = {'x3': tempList2[9].x3, 'y3':tempList2[9].y3, 'x4':tempList2[9].x4, 'y4':tempList2[9].y4};
list2Index['Invesco'] = {'x3': tempList2[10].x3, 'y3':tempList2[10].y3, 'x4':tempList2[10].x4, 'y4':tempList2[10].y4};
list2Index['BOCI-Prudential'] = {'x3': tempList2[11].x3, 'y3':tempList2[11].y3, 'x4':tempList2[11].x4, 'y4':tempList2[11].y4};
list2Index['DWS'] = {'x3': tempList2[12].x3, 'y3':tempList2[12].y3, 'x4':tempList2[12].x4, 'y4':tempList2[12].y4};
list2Index['CSOP'] = {'x3': tempList2[13].x3, 'y3':tempList2[13].y3, 'x4':tempList2[13].x4, 'y4':tempList2[13].y4};
list2Index['Principal'] = {'x3': tempList2[14].x3, 'y3':tempList2[14].y3, 'x4':tempList2[14].x4, 'y4':tempList2[14].y4};
list2Index['Allianz'] = {'x3': tempList2[15].x3, 'y3':tempList2[15].y3, 'x4':tempList2[15].x4, 'y4':tempList2[15].y4};
list2Index['Manulife'] = {'x3': tempList2[16].x3, 'y3':tempList2[16].y3, 'x4':tempList2[16].x4, 'y4':tempList2[16].y4};
list2Index['Aberdeen Standard'] = {'x3': tempList2[17].x3, 'y3':tempList2[17].y3, 'x4':tempList2[17].x4, 'y4':tempList2[17].y4};
list2Index['ChinaAMC'] = {'x3': tempList2[18].x3, 'y3':tempList2[18].y3, 'x4':tempList2[18].x4, 'y4':tempList2[18].y4};
list2Index['Mirae Asset'] = {'x3': tempList2[19].x3, 'y3':tempList2[19].y3, 'x4':tempList2[19].x4, 'y4':tempList2[19].y4};
list2Index2['BlackRock'] = {'x1': tempList2[0].x3, 'y1':tempList2[0].y3, 'x2':tempList2[0].x4, 'y2':tempList2[0].y4};
list2Index2['Fidelity'] = {'x1': tempList2[1].x3, 'y1':tempList2[1].y3, 'x2':tempList2[1].x4, 'y2':tempList2[1].y4};
list2Index2['SSgA'] = {'x1': tempList2[2].x3, 'y1':tempList2[2].y3, 'x2':tempList2[2].x4, 'y2':tempList2[2].y4};
list2Index2['Hang Seng'] = {'x1': tempList2[3].x3, 'y1':tempList2[3].y3, 'x2':tempList2[3].x4, 'y2':tempList2[3].y4};
list2Index2['UBS'] = {'x1': tempList2[4].x3, 'y1':tempList2[4].y3, 'x2':tempList2[4].x4, 'y2':tempList2[4].y4};
list2Index2['Schroders'] = {'x1': tempList2[5].x3, 'y1':tempList2[5].y3, 'x2':tempList2[5].x4, 'y2':tempList2[5].y4};
list2Index2['JP Morgan'] = {'x1': tempList2[6].x3, 'y1':tempList2[6].y3, 'x2':tempList2[6].x4, 'y2':tempList2[6].y4};
list2Index2['Value Partners'] = {'x1': tempList2[7].x3, 'y1':tempList2[7].y3, 'x2':tempList2[7].x4, 'y2':tempList2[7].y4};
list2Index2['First State'] = {'x1': tempList2[8].x3, 'y1':tempList2[8].y3, 'x2':tempList2[8].x4, 'y2':tempList2[8].y4};
list2Index2['HSBC'] = {'x1': tempList2[9].x3, 'y1':tempList2[9].y3, 'x2':tempList2[9].x4, 'y2':tempList2[9].y4};
list2Index2['Invesco'] = {'x1': tempList2[10].x3, 'y1':tempList2[10].y3, 'x2':tempList2[10].x4, 'y2':tempList2[10].y4};
list2Index2['BOCI-Prudential'] = {'x1': tempList2[11].x3, 'y1':tempList2[11].y3, 'x2':tempList2[11].x4, 'y2':tempList2[11].y4};
list2Index2['DWS'] = {'x1': tempList2[12].x3, 'y1':tempList2[12].y3, 'x2':tempList2[12].x4, 'y2':tempList2[12].y4};
list2Index2['CSOP'] = {'x1': tempList2[13].x3, 'y1':tempList2[13].y3, 'x2':tempList2[13].x4, 'y2':tempList2[13].y4};
list2Index2['Principal'] = {'x1': tempList2[14].x3, 'y1':tempList2[14].y3, 'x2':tempList2[14].x4, 'y2':tempList2[14].y4};
list2Index2['Allianz'] = {'x1': tempList2[15].x3, 'y1':tempList2[15].y3, 'x2':tempList2[15].x4, 'y2':tempList2[15].y4};
list2Index2['Manulife'] = {'x1': tempList2[16].x3, 'y1':tempList2[16].y3, 'x2':tempList2[16].x4, 'y2':tempList2[16].y4};
list2Index2['Aberdeen Standard'] = {'x1': tempList2[17].x3, 'y1':tempList2[17].y3, 'x2':tempList2[17].x4, 'y2':tempList2[17].y4};
list2Index2['ChinaAMC'] = {'x1': tempList2[18].x3, 'y1':tempList2[18].y3, 'x2':tempList2[18].x4, 'y2':tempList2[18].y4};
list2Index2['Mirae Asset'] = {'x1': tempList2[19].x3, 'y1':tempList2[19].y3, 'x2':tempList2[19].x4, 'y2':tempList2[19].y4};
list3Index['BlackRock'] = {'x3': tempList3[0].x3, 'y3':tempList3[0].y3, 'x4':tempList3[0].x4, 'y4':tempList3[0].y4};
list3Index['Fidelity'] = {'x3': tempList3[1].x3, 'y3':tempList3[1].y3, 'x4':tempList3[1].x4, 'y4':tempList3[1].y4};
list3Index['SSgA'] = {'x3': tempList3[2].x3, 'y3':tempList3[2].y3, 'x4':tempList3[2].x4, 'y4':tempList3[2].y4};
list3Index['UBS'] = {'x3': tempList3[3].x3, 'y3':tempList3[3].y3, 'x4':tempList3[3].x4, 'y4':tempList3[3].y4};
list3Index['Hang Seng'] = {'x3': tempList3[4].x3, 'y3':tempList3[4].y3, 'x4':tempList3[4].x4, 'y4':tempList3[4].y4};
list3Index['Schroders'] = {'x3': tempList3[5].x3, 'y3':tempList3[5].y3, 'x4':tempList3[5].x4, 'y4':tempList3[5].y4};
list3Index['Value Partners'] = {'x3': tempList3[6].x3, 'y3':tempList3[6].y3, 'x4':tempList3[6].x4, 'y4':tempList3[6].y4};
list3Index['JP Morgan'] = {'x3': tempList3[7].x3, 'y3':tempList3[7].y3, 'x4':tempList3[7].x4, 'y4':tempList3[7].y4};
list3Index['First State'] = {'x3': tempList3[8].x3, 'y3':tempList3[8].y3, 'x4':tempList3[8].x4, 'y4':tempList3[8].y4};
list3Index['DWS'] = {'x3': tempList3[9].x3, 'y3':tempList3[9].y3, 'x4':tempList3[9].x4, 'y4':tempList3[9].y4};
list3Index['Invesco'] = {'x3': tempList3[10].x3, 'y3':tempList3[10].y3, 'x4':tempList3[10].x4, 'y4':tempList3[10].y4};
list3Index['HSBC'] = {'x3': tempList3[11].x3, 'y3':tempList3[11].y3, 'x4':tempList3[11].x4, 'y4':tempList3[11].y4};
list3Index['Allianz'] = {'x3': tempList3[12].x3, 'y3':tempList3[12].y3, 'x4':tempList3[12].x4, 'y4':tempList3[12].y4};
list3Index['BOCI-Prudential'] = {'x3': tempList3[13].x3, 'y3':tempList3[13].y3, 'x4':tempList3[13].x4, 'y4':tempList3[13].y4};
list3Index['CSOP'] = {'x3': tempList3[14].x3, 'y3':tempList3[14].y3, 'x4':tempList3[14].x4, 'y4':tempList3[14].y4};
list3Index['Aberdeen Standard'] = {'x3': tempList3[15].x3, 'y3':tempList3[15].y3, 'x4':tempList3[15].x4, 'y4':tempList3[15].y4};
list3Index['Principal'] = {'x3': tempList3[16].x3, 'y3':tempList3[16].y3, 'x4':tempList3[16].x4, 'y4':tempList3[16].y4};
list3Index['Manulife'] = {'x3': tempList3[17].x3, 'y3':tempList3[17].y3, 'x4':tempList3[17].x4, 'y4':tempList3[17].y4};
list3Index['ChinaAMC'] = {'x3': tempList3[18].x3, 'y3':tempList3[18].y3, 'x4':tempList3[18].x4, 'y4':tempList3[18].y4};
list3Index['Mirae Asset'] = {'x3': tempList3[19].x3, 'y3':tempList3[19].y3, 'x4':tempList3[19].x4, 'y4':tempList3[19].y4};
var bigList = [];
for (var k = 0; k <20; k++) {
var thisManager = managerList[k].manager;
let merged = {...list1Index[thisManager], ...list2Index[thisManager]};
bigList.push(merged);
};
var bigList2 = [];
for (var k = 0; k <20; k++) {
var thisManager = managerList[k].manager;
let merged2 = {...list2Index2[thisManager], ...list3Index[thisManager]};
bigList2.push(merged2);
};
var polyMaster = [];
for (var k = 0; k < bigList.length; k++) {
var tempItem = [
{'x':bigList[k].x1+4, 'y':bigList[k].y1},
{'x':bigList[k].x2+4, 'y':bigList[k].y2+2},
{'x':bigList[k].x3-4, 'y':bigList[k].y3+1},
{'x':bigList[k].x4-4, 'y':bigList[k].y4-2},
];
polyMaster.push(tempItem);
}
var polyMaster2 = [];
for (var k = 0; k < bigList2.length; k++) {
var tempItem = [
{'x':bigList2[k].x1+4+120, 'y':bigList2[k].y2},
{'x':bigList2[k].x2+4+120, 'y':bigList2[k].y1+2},
{'x':bigList2[k].x3-4, 'y':bigList2[k].y3+1},
{'x':bigList2[k].x4-4, 'y':bigList2[k].y4-2},
];
polyMaster2.push(tempItem);
}
graphGroup.selectAll(".poly1")
.data(polyMaster)
.enter().append("polygon")
.attr('class','poly1')
.attr("points",function(d) {
return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
.style('fill', function(d,i) {return colorMap[managerList[i].manager]})
.style('opacity', .6);
graphGroup.selectAll(".poly2")
.data(polyMaster2)
.enter().append("polygon")
.attr('class','poly2')
.attr("points",function(d) {
return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
.style('fill', function(d,i) {return colorMap[managerList[i].manager]})
.style('opacity', .6);
<script src="https://d3js.org/d3.v5.min.js"></script>
推荐阅读
- solr - 未知形状定义 [CIRCLE]
- sql-server - SQL Server 命令元数据 - 用于审核的自定义文本
- c# - 查询未返回实体
- flutter - 颤振自定义油漆响应问题
- jquery - 如果登录会话在 laravel 应用程序中过期,jQuery 如何捕获?
- redux - 仅当从 redux 中间件中删除记录器时,Recharts 工具提示才会崩溃
- php - 如何添加日期并打印某一天的所有结果?
- php - JQUERY AJAX 调用返回 PHP 页面内容
- webhooks - Stripe webhook,当支付的产品不是订阅而是一次性付款时,我如何才能收到 PRICE 项目?
- css - 无媒体查询如何实现3列桌面转1列移动布局