Javascript D3检索用于附加平行四边形(多边形)的矩形顶点

Javascript D3检索用于附加平行四边形(多边形)的矩形顶点,javascript,d3.js,Javascript,D3.js,我的目标是绘制平行四边形,将一家公司在一个业务季度的排名与其在下一个业务季度的新排名联系起来。我使用RECT代表每个公司或经理。(每列为一个业务季度)。我的步骤/进展: 使用.each()通过检索x、y和高度的每个矩形的.attr()来存储平行四边形顶点 由于每个列的公司顺序不同,我必须将这些x&y坐标存储到两个数组中 然后我必须合并它们,条件是xs和ys属于同一个经理。(例如,Fidelity在第一列之后从#1变为#2) 这就是问题开始的地方,基本上,我的y1s和y0s都停留在相同的值,我

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

  • 使用
    .each()
    通过检索
    x
    y
    高度的每个矩形的
    .attr()
    来存储平行四边形顶点
  • 由于每个列的公司顺序不同,我必须将这些x&y坐标存储到两个数组中
  • 然后我必须合并它们,条件是xs和ys属于同一个经理。(例如,
    Fidelity
    在第一列之后从#1变为#2)
这就是问题开始的地方,基本上,我的
y1
s和
y0
s都停留在相同的值,我不知道为什么


var边距={顶部:20,底部:300,左侧:30,右侧:100};
var高度=600;
var宽度=900;
var totalWidth=宽度+边距。左+边距。右;
var totalHeight=高度+边距。顶部+边距。底部;
外部变量=(400/2);
var内半径=15;
var svg=d3.select('body')
.append('svg')
.attr('width',totalWidth)
.attr(“高度”,总高度);
var graphGroup=svg.append('g')
.attr('transform','translate(“+margins.left+”,“+margins.top+”);
var heightScale=d3.scaleLinear()
.domain([.01,09])
.范围([7,50]);
/*
var tsvData=d3.tsv('market-share-change.tsv');
tsvData.then(函数(rawData){
var data=rawData.map(函数(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':'hangseng','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':'hangseng','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':'hangseng','share':0.056},
{'manager':'UBS','share':0.061},
{'manager':'SSgA','share':0.062},
{'manager':'Fidelity','share':0.087},
{'manager':'BlackRock','share':0.096}]];
变量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 k=0;k({
…list1ByManager[item2.manager],
…项目2
}));
console.log(组合列表)
var polyMaster=[];
for(var k=0;k

我找到了一个解决方案,但它很可怕,一点也不简洁。为了时间的利益,我不得不这样做。我可能很快会重新访问这段代码,我很想看看其他人是否有改进的想法

最引人注目的异端密码是用暴力填充物体。我一直遇到一个错误,无法创建具有理解或for循环的对象

即使你没有耐心阅读我所有糟糕的代码,你至少可以看到最终的结果——这看起来很糟糕