굽힘 SVG`<g>` 곡선 주위

Question

D3.js를 사용하여 일부 SVG <path>을 직선으로 그립니다. 이러한 모든 요소는 동일한 수직 변형을 사용하여 <g>에 포함됩니다.

나는 원호 주변에 이러한 요소를 "포장"하고 싶습니다. 결국, 각 사각형은 원호의 작은 부분이되어야하고, 수직선은 원의 중심을 가리킬 것입니다.

저는 처음부터 호에서 이렇게 할 수 있다는 것을 알고 있습니다. 예를 들어 두꺼운 원 세그먼트를 직사각형 대신 종단 간으로 그립니다. 그러나 이것은 SVG를 처음 사용하는 사람들에게 특히 많은 수학과 계산처럼 들립니다.

이러한 요소를 곡선으로 변환하는 방법이 있습니까 게시 즉 transform 속성을 변경하여이 사각형을 그리는 코드를 사용할 수 있습니까? 외부 SVG 라이브러리가있는 경우 (비록 성공하지 못했지만),이를 사용하는 것도 고려해 볼 수 있습니다.

Answer 1

나는 그것이 주위에 일렬로 배열 요소 변신 할 수 있다는 점에서 기대했다 확실히 어떤 -though 경로 아크 명령 A를 사용하는 것보다 쉽게 ​​원을-I (이전 d3.svg.arc()) d3.arc()을 발견했다.

canvas.selectAll(".xContainer") 
    .selectAll("path") 
    .data(...) 
    .enter() 
    .append("path") 
    .attr("fill", function(element, index) { return colorForSize(element[4]); }) 
    .attr("d", function(element, index) { 

     var arc = d3.arc() 
      .innerRadius(iR) 
      .outerRadius(iR + 10) 
      .startAngle(element[1]) 
      .endAngle(element[2]) 
      .cornerRadius(isRounded ? 8 : 0); 

     return arc(); 

    }); 

고마워, Bill.