javascript - D3 检索矩形顶点以附加平行四边形(多边形)

Question

我的目标是绘制平行四边形，将一家公司在一个业务季度的排名与其在下一业务季度的新排名联系起来。我正在使用 rects 来代表每个公司或 manager。 (每列是一个商业季度)。我的步骤/进度:

• 使用 .each() 通过检索每个矩形的 .attr() 来存储平行四边形的顶点 x,y 和 高度。
• 由于每一列的公司顺序不同，我不得不将这些 x 和 y 坐标存储到两个数组中。
• 然后我不得不合并它们，条件是 xs 和 ys 属于同一个经理。 (例如，Fidelity 在第一列后从 #1 变为 #2)。

这就是问题开始的地方，基本上，我的 y1 和 y0 都停留在相同的值，我不确定为什么。

  

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 y 未正确合并。相关代码:

          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 未如代码段所示保留？

(换句话说，平行四边形(黑色)不应该都画在第一列的底部，它们应该完美地连接到相应的公司——如果你愿意的话，可以形成一座桥，让眼睛容易看到通过跟踪公司在第一列中的位置到其在第二列中的新位置，查看任何一家公司的排名变化)

注意:我现在只关心第一列和第二列之间的平行四边形。在弄清楚这么多之前，我不会尝试使用第三列。

Answer 1

我找到了一个解决方案，但它很丑陋，一点也不简洁。为了节省时间，我不得不接受它。我可能很快会重新访问这段代码，我很想看看其他人是否有改进的想法。

最明显的异端代码是通过蛮力填充对象。我一直遇到无法使用理解或 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>