Question

原始代码位于： http://bl.ocks.org/Guerino1/451f4c47842967dd813c8a64b24f7686

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

代码的以下部分似乎按预期工作。应用转换会使V形图从左到右转换到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);

以下代码尝试遵循与上述相同的模式，似乎无法按预期工作。鉴于转换，我希望文本框（在V形下方的浅蓝色）也可以使用D3多边形绘制，从左到右过渡到他们的svg画布上，就像上面代码中的V形多边形一样...... / p>

    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);

问题：如何在后一组代码中正确添加过渡到D3多边形，这些多边形看起来像矩形（在V形下方），并使它们转换到页面中就像他们上面的深蓝色的V形臂？

Answer 1

原始code：

制作

#include <stdio.h>
#include<malloc.h>
struct node
{
unsigned long int data ;
struct node *next,*prev;
};

int main()
{
    int n ,m,a,count=0,i,j;
    char rot;
    scanf("%d %d ", &n ,&m);
    struct node *head1=NULL,*rear1,*ptr,*temp,*head2=NULL,*rear2;
    if(head1==NULL)
    {
        temp=(struct node*)malloc(sizeof(struct node));
        scanf("%ld ",&temp->data);
        temp->next=NULL;
        head1=temp;
        ptr=head1;
        head1->prev=NULL;
    }

    for(i=1;i<=n-1;i++)
    {
        temp=(struct node*)malloc(sizeof(struct node));
        scanf("%ld ",&temp->data);

        ptr->next=temp;
        temp->prev=ptr;
        ptr=temp;
        temp->next=NULL;

    }

    rear1=ptr;
    temp=NULL;
    ptr=NULL;
    fflush(stdout);

    if(head2==NULL)
    {
        temp=(struct node*)malloc(sizeof(struct node));
        scanf("%ld ",&temp->data);
        temp->next=NULL;
        head2=temp;
        ptr=head2;
    }
    for(i=1;i<=n-1;i++)
    {

        temp=(struct node*)malloc(sizeof(struct node));
        scanf("%ld ",&temp->data);

        ptr->next=temp;
        ptr=temp;
        ptr->next=NULL;

    }

    rear2=ptr;
    ptr=NULL;temp=NULL;
    fflush(stdout);

    for(i=0;i<m;i++)
    {
    scanf("%c %d",&rot,&a);
    fflush(stdout);

    if(rot=='L')
    {
        ptr=head1;
        for(j=0;j<a;j++)
        {
            temp=ptr->next;
            rear1->next=ptr;
            ptr->prev=rear1;
            rear1=ptr;
            head1=temp;
            ptr=head1;
        }

        count++;
        ptr=NULL;
        temp=NULL;

        if(head1->data==head2->data && rear1->data==rear2->data)
        {
            break;

        }
    }
    else if(rot=='R')
    {
        temp=head1;
        ptr=rear1->prev;

        for(j=0;j<a;j++)
        {
            temp->prev=rear1;
            rear1->prev->next=NULL;
            rear1->next=temp;
            head1=rear1;
            temp=head1;
            rear1=ptr;
            ptr=rear1->prev;

        }

        count++;
        temp=NULL;
        ptr=NULL;

        if(head1->data==head2->data && rear1->data==rear2->data)
        {
            break;

        }

    }
    }
    printf("%d",count);

    return 0;
}

接下来，要在函数var chevronGapSpace = 5;//this is the distance between each rectangle. var slantDepth = 0;//to make the polygon rectangle.内进行矩形转换，请相应地更改计算：

calculateChevron

工作代码here

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

1 个答案: