<rect>svg 中的动态间距公式

Question

如何根据编号设置动态间距。返回的数据?如果只返回一个数据，我希望它位于中间。如果返回两个数据，则进行调整，依此类推。

var prev = {
"Prev": [{
"type": "Prev1",
},
{
"type": "Prev2",
},
{
"type": "Prev3",
},

]
};

var draw = document.getElementById('drawing');

prev.Prev.forEach((p, i, arr) => {
let x = 55;
let y = 250/arr.length*i+50;
draw.innerHTML += `<g transform="translate(${x} ${y})">
<rect x="-50" y="-20" width="100" height="40" rx="10" />
<text dominant-baseline="middle" text-anchor="middle" width="100">${p.type}</text>
<line x1="50" y1="0" x2="100" y2="${250/arr.length-y+50}" /> 
</g>`;
});

draw.innerHTML += `<g>
<rect x="150" y="110" width="100" height="40" rx="10" />
<text  x="200" y="130" dominant-baseline="middle" text-anchor="middle" width="100">BASE</text>
</g>`;

line, rect {stroke-width: 1; stroke: navy; fill: none;}
text {fill: navy;}

<svg id="drawing" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">

</svg>

Answer 1

这很简单。你只需要计算第一个矩形的顶部，然后加上i乘以从一个项目的顶部到下一个项目的顶部的距离。

var prev = {
"Prev": [{
"type": "Prev1",
},
{
"type": "Prev2",
},
{
"type": "Prev3",
}

]
};
var draw = document.getElementById('drawing');
var RECT_HEIGHT = 40;
var RECT_SPACING = 50;
var SVG_HEIGHT = 300;
prev.Prev.forEach((p, i, arr) => {
// number of rects/graph items
let num = arr.length;
// total height of all <num> 
let totalHeight = num * RECT_HEIGHT + (num - 1) * RECT_SPACING;
let x = 55;
// final position = position of first rect + i * distance_between_rects
let y = (SVG_HEIGHT - totalHeight) / 2   // top of first rect
+ i * (RECT_HEIGHT + RECT_SPACING);  // i * distance_between_rects
draw.innerHTML += `<g transform="translate(${x} ${y})">
<rect x="-50" y="0" width="100" height="40" rx="10" />
<text y="20" dominant-baseline="middle" text-anchor="middle"
width="100">${p.type}</text>
<line x1="50" y1="20" x2="100" y2="${SVG_HEIGHT / 2 - y}" /> 
</g>`;
});
/*
draw.innerHTML += `<g>
<rect x="150" y="110" width="100" height="40" rx="10" />
<text  x="200" y="130" dominant-baseline="middle" text-anchor="middle" width="100">BASE</text>
</g>`;
*/

svg {
background: linen;
}

<svg id="drawing" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<style>
line, rect {stroke-width: 1; stroke: navy; fill: none;}
text {fill: navy;}
</style>
</svg>