설정 SVG 원 ATTR 동적으로 반응 +

jsx 나는 다음과 같은 코드 조각이 : 항목 객체의 배열입니다설정 SVG 원 ATTR 동적으로 반응 +

{items.map((item, index) => ( 
    <g className="item" key={index} >     
    <circle r="60" className="md" cx="5%" cy="50%"/> 
    <text className="textNode" x="5%" y="50%"> 
     {item.text} 
    </text> 
    </g> 
))}

. 내가 뭘 하려는지 배열의 각 항목에 대한 SVG 원을 만드는 것입니다.

지금은 모든 원이 한 위치에 있습니다. 모든 반복에서 원의 cx 속성을 5 % 늘리려면 어떻게해야합니까?

출처

2017-11-07 pj013

안녕 나의 제안은 아래에 수 있다면 내가 궁금해서 간단한 쇼케이스 올바른 방향으로 나아갈 수 있도록 도와줍니다. 이것에 대한 업데이트가 있으면 계속 게시 해주십시오. – scniro

@scniro 그것이 작동했습니다 - 감사합니다! 그 이유는 내가 upvoted :) – pj013

감사합니다 - 당신을 위해 잘 작동하면 답변 (녹색 확인)을 받아주십시오 또한 우리는 둘 다 작은 담당자를 얻을 수 있도록하시기 바랍니다 – scniro

왜 증가하지 않는가?

cx={`${5 * (index + 1)}%`}

은 ... 다음 관찰 등 cx="5%", cx="10%", 발생한다

{items.map((item, index) => ( 
    <g className="item" key={index} >     
    <circle r="60" className="md" cx={`${5 * (index + 1)}%`} cy="50%"/> 
    <text className="textNode" x="5%" y="50%"> 
     {item.text} 
    </text> 
    </g> 
))}

JSFiddle demo - 변환

출처

2017-11-07 18:46:40 scniro

답변

관련 문제