각도 내 D3JS 앱

각도 내 D3JS 앱

저는 AngularJS로 첫 번째 앱을 만들려고 합니다.깔끔해 보이지만 추상적인 부분이 많아 d3js로 만든 비주얼을 업데이트하기 위해 각도 방법을 사용하는 가장 관용적인 방법에 대한 조언이 있는지 궁금할 뿐입니다.

고마워, bp

각진 틀과 다른 틀이 잘 작동하도록 하려면 "기타" 틀을 지침을 사용하여 감싸야 합니다.

http://docs.angularjs.org/guide/directive

"다른" 프레임워크에 의해 데이터가 업데이트되었을 때 각도로 구분해야 합니다.각도가 알 필요가 없다면 작업이 더 간단해집니다.

SVG와 연동되는 예를 다음에 제시하겠습니다.그것은 훌륭합니다.

http://sullerandras.github.com/SVG-Sequence-Diagram/

다음으로 TinyMCE를 랩하는 예를 나타냅니다.

http://jsfiddle.net/programmieraffe/kjsEV/

또한 Angular를 삽입할 수 있습니다.JS 핸들 바 구문은 d3 생성 요소에 직접 입력됩니다.

var containerDiv = d3.select(targetCSSSelectorForADiv);
var svgG = containerDiv
                                .append("svg")
                                .attr("width", width + margin.left + margin.right)
                                .attr("height", height + margin.top + margin.bottom)
                                .append("g")
                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

 svgG.selectAll(".tempclass").data(scope.circles).enter()
                                .append("circle")
                                .attr("class", "tempclass")
                                .attr("cx", function (d, i) { return "{{circles[" + i + "].cx}}" })
                                .attr("cy", function (d, i) { return "{{circles[" + i + "].cy}}" })
                                .attr("r", function (d, i) { return "{{circles[" + i + "].radius}}" })
                                .attr("ng-style", function (d, i)
                                {
                                    return "{fill: circles[" + i + "].circolor"
                                        + ", opacity: circles[" + i + "].opa"
                                        + ", 'stroke-width': 4*circles[" + i + "].opa"
                                        + ", stroke: 'red' }";
                                });

다음 사항에 유의하십시오. 스코프는 사실상 지시에서 렌더링 함수로 전달되는 각도 스코프 객체입니다.요소의 스타일을 {{...}로 설정}}" 표현은 사용할 수 없기 때문에 여기서 "ng-style" 속성을 사용합니다.

하지만 한 가지 요령이 더 있습니다.Angular에게 동적으로 생성된 DOM 요소를 살펴보고 데이터 바인딩을 배선하도록 지시해야 합니다. 이제 두 가지 방법이 있습니다.

//the target div is the one with the angular ng-controller attribute 
//this you can call at the end of the d3 rendering call from within the render function
angular.bootstrap(document.getElementById("d3ContainerDivID"), ['d3App']);

다른 방법은 다음과 같습니다.

//and this could be called from the directive that triggered the rendering or
//some other place that could have the angular $compile service injected
$compile(document.getElementById("d3ContainerDivID"))(scope);

이제 스코프 멤버를 변경할 수 있습니다.이 경우 스코프 멤버는 d3 요소(이 경우 svg 원)로 직접 업데이트됩니다.각도 컨트롤러(d3 오브젝트를 그리는 디렉티브가 기동하기 전에 인스턴스화된다).

    $scope.circles = [];
    for (var i = 0; i < 50; i++)
    {
        $scope.circles.push(new Circle());
    }
    setInterval(function ()
    {
        $scope.circles.forEach(function (d, i) { $scope.circles[i] = new Circle(); });
        $scope.$digest();
    }, 2000);

변경된 스코프를 다이제스트하도록 angular에 지시하는 $digest 호출에 주의해 주십시오.이것에 의해, svg circle 요소의 값이 변경됩니다.애니메이션 등의 경우 d3는 더 이상 책임이 없으며 수동으로 구현하거나 다른 패턴을 사용해야 합니다.

또한 이 자습서/스크린캐스트에 따라 D3를 각도와 함께 사용하는 방법을 확인할 수 있습니다.이것은 조금 다릅니다.왜냐하면 d3 주변 래퍼 라이브러리를 사용하기 때문입니다.이것은 특정 그래프 작성 기능을 제공하는 것입니다.다만, 어프로치는 완전히 동일합니다.

http://tagtree.tv/d3-with-rickshaw-and-angular

를 사용하여 Angular알 수 ), "D3"를 호출할 수 . "Angular"는 "Angular"를 호출할 수 있습니다.$compile UPDATE를 합니다.call() ( 개의다음과 같이(여러 개의 원을 렌더링한다고 가정):

mySvg.selectAll("circle")
                .data(scope.nodes)
                .enter()
                .append("circle")
                .attr("someDirective")
                .call(function(){
                    $compile(this[0].parentNode)(scope);
                });

언급URL : https://stackoverflow.com/questions/11141528/d3-within-an-angularjs-app