React Native에서 호 중력선을 얻는 방법?

필자는 원호를 React Native에 가지고 있으며 레이블 지정을 위해 centroid (중간 점)을 얻고 싶습니다. 그들은 d3.shape.arc()을 사용하여 생성됩니다. 호에 의해 생성 된 데이터를 사용하여 SVG로 그려집니다.React Native에서 호 중력선을 얻는 방법?

this example (나는 또한 this을 발견했지만 아무 것도 작동하지 않음)을 수행하려고합니다. 그것은 React.js에 있습니다. 그래서 나는 과거에했던 것처럼 그것을 React Native로 변환해야합니다. 그러나 저는 붙어 있습니다.

내가 좋아하는 일을 시도했다 :

: 그것은 아래 //My attempts here 말한다 곳

this.middle = this.arc.centroid();
this.middle = this.arc.centroid(this.props.arcData);
this.middle = d3.shape.arc().centroid(this.arc);
this.middle = d3.shape.arc().centroid(this.props.arcData);

export default class Arc extends Component { 
    constructor(props) { 
     super(props); 

     this.arc = d3.shape 
      .arc() 
      .outerRadius(this.props.outerRadius) 
      .innerRadius(this.props.innerRadius) 
      .cornerRadius(this.props.cornerRadius) 
      (this.props.arcData); 

     //My attempts here 
    } 
    . 
    . 
    . 
    render() { 
     return (
      <G> 
       <Path d={this.arc} fill={this.props.color} /> 
       <Polyline ... /> //This is what I'm trying to draw eventually 
      </G> 
     ); 
    } 
}

두 번째 시도에서는 함수가 아니거나 두 번째 NaN 값이 두 개있는 배열을 반환합니다. 이 변수들은 우리가 함수를 호출 할 수있는 객체가 아니기 때문에 React Native는 select, append, attr 및 모든 재즈에 대해 DOM 요소를 가지고 있지 않기 때문에 이전에 실행했습니다. 나는 과거에 그것을 해결할 수 있었지만 이번에는 붙어 있습니다.

React Native에서 호의 중심을 성공적으로 가져올 수있는 다른 방법이 있습니까?

출처

2017-12-28 MC10

나는 결국 변수가 부족하여 다시 전체 표현식을 대체 할 수있는 다음 날을 알아 냈습니다.

this.points = [ 
    d3.shape.arc().outerRadius(this.props.outerRadius).innerRadius(this.props.innerRadius).centroid(this.props.arcData), 
    d3.shape.arc().outerRadius(this.props.radius*0.95).innerRadius(this.props.radius*0.95).centroid(this.props.arcData), 
    pos 
];

첫 번째 요소는 원호이고 두 번째 요소는 질문에서 링크 된 예제를 기반으로 한 outerArc입니다.

나는 그 점에 폴리 라인을 그릴 :

<Polyline points={this.points} />

희망이 기본 반작용에 무게 중심을 사용하고자하는 사람을 도움이됩니다. midAngle이나 NaN에 문제가 생기면 의견이나 그 점에서 알려주십시오.

출처

2018-01-02 14:56:05 MC10

React Native에서 호 중력선을 얻는 방법?

답변

관련 문제