如何正确添加过渡到 D3 多边形？

Question

原码见：http://bl.ocks.org/Guerino1/451f4c47842967dd813c8a64b24f7686

问题：将 .transition() 代码应用于不同的多边形集似乎会产生不同的结果。

以下部分代码似乎按预期工作。应用过渡会使人字形从左到右过渡到 svg 画布上...

    svgChevronsCanvas.selectAll("a")
        .data(dataSet)
      .enter().append("a")
        .attr("xlink:href", function(d) { return d.link; })
      .append("svg:polygon")
        .attr("id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
        .attr("originalcolor", polygonPrimaryColor)
        //.style("stroke","blue")
        //.style("stroke-width",1)
        .style("fill", polygonPrimaryColor)
        .attr("points", chevronOrigin)
        .on('mouseover', chevronMouseOver)
        .on("mouseout", chevronMouseOut)
        .on("click", chevronMouseOut)
        .transition() // <------------------- TRANSITION HERE
        .duration(3000)
        .attr("points", calculateChevron);

以下代码尝试遵循与上述相同的模式，但似乎没有按预期工作。鉴于过渡，我希望文本框（人字形下方的浅蓝色）也使用 D3 多边形绘制，从左到右过渡到它们的 svg 画布上，就像上面代码中的人字形多边形一样...

    svgTextboxesCanvas.selectAll("a")
        .data(dataSet)
      .enter().append("a")
        .attr("xlink:href", function(d) { return d.link; })
      .append("svg:polygon")
        .attr("id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
        .attr("originalcolor", textboxColor)
        .style("stroke", textboxColor)
        .style("stroke-width",1)
        .style("fill", textboxColor)
        .attr("points", textboxesOrigin)
        .on('mouseover', textboxMouseOver)
        .on("mouseout", textboxMouseOut)
        .on("click", textboxMouseOut)
        .transition()
        .duration(3000)
        .attr("points", calculateTextbox);

问题：如何在后一组代码中正确地将过渡添加到构建为看起来像矩形（在 V 形下方）的 D3 多边形中，并使它们过渡到页面中像他们上方的深蓝色人字形？

Answer 1

原文code：

制作

var chevronGapSpace = 5;//this is the distance between each rectangle.
var slantDepth = 0;//to make the polygon rectangle.

接下来，要在函数calculateChevron 内进行矩形转换，相应地更改计算：

function calculateChevron(d, i){
  return [
    [(svgMargin) + i*(chevronDistance),chevronTopOffset],
    [(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronTop],
    [(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronPointY],
    [(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronBottom],
    [(svgMargin) + i*(chevronDistance),chevronBottom],
    [(svgMargin + slantDepth) + i*(chevronDistance),chevronPointY]
  ];
};

工作代码here