How can i convert d3 force directive graph to use with angularjs?

Question

I have created a D3 force directive graph with normal javascript.

Now i need to get the data from a service and generate the graph in AngularJS. How can I make a directive out of this? Any example or guidance will be great.

I have made a controller to get the data from the service. And the code is here:

 $scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," 
          + $rootScope.hierarchystring.toString() 
          + "," + "Hierarchy" + "," + Digin_Engine_API);

        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            console.log("Hierarchy data is");
            console.log(JSON.stringify(obj));

        };
    };

Is there a way I could get this data inside this function?

function loadImage() {}

Cyril Cherian · Accepted Answer · 2015-11-09 14:53:24Z

3

The code you have put is a little heavy for me to angularize but I ll try to illustrate your case with some snippets :)

First create a DOM where you want to inject your angular directive which will make the d3 chart.

That's done like this:

<svg linear-chart></svg>

Here linear-chart will trigger the directive. So lets see a directive:

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
        //all your code for making the force layout
}});

Next challenge the data is pulled via async task done by web worker.

$scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," + $rootScope.hierarchystring.toString() + "," + "Hierarchy" + "," + Digin_Engine_API);
        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            $scope.data = obj;//setting the data into the scope object.

        };
    };

So now whenever your async task completes the scope data is set to that. We know that the value inside the scope data changes so we need to have a watch function which will trigger the link function on change of the $scope.data

Something like this

app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
            //this will watch the scope data
            scope.$watch(
                "data",function(){/*your d3 code for making the forcelayout which will get triggred when scope.data changes :)
*/})...

Here is a small fiddle

Note: Here i am mocking your webworker code by a button click in the loadData function.

Hope this helps! :)

answered Nov 9, 2015 at 14:53

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Sajeetharan Over a year ago

Thanks cyril! Great help indeed

Sajeetharan Over a year ago

Cyril can you help me with this? when i generate the directive inside a dialog box, it does not work. here is the plunker code plnkr.co/edit/n15aFqOK7uZSDCVpQ9lz?p=preview

Cyril Cherian Over a year ago

One small thing d3.select("#d3ForceNew") is incorrect 1) There is no such div 2) you are appending an svg 3) you already have an svg so it should be this var svg = d3.select("svg").attr("width", width) .attr("height", height); plnkr.co/edit/EggzAyllnIpmNO5KTPhg?p=preview

Sajeetharan Over a year ago

Thanks again! one more problem, when i click a node, mouse gets attached to the node and it cant be released when it is inside a modal. do you suggest any solution for that?

Cyril Cherian Over a year ago

if you see this plnkr.co/edit/3mpEVJdj11RQPcFM6oyB?p=preview i have disabled the node drag...so now on dragging of node the dialog is moving. I think that is the reason why on drag its sticking. the material design dilog drag and node drag are conflicting.

|

Collectives™ on Stack Overflow

How can i convert d3 force directive graph to use with angularjs?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related