[Solved]-Call custom made function from svg element using AngularJs and D3.js-d3.js

score:0

The reason that ng-click and ng-dblclick don't work is because the AngularJS $compiler is unaware that this element has been added to the DOM, so it can't perform the necessary preparations to make ng-* work.

But since you insert the code inside an AngularJS controller, you shouldn't need to use these types of ng-* directives. Instead, you can just access self and viewModelHelper directly inside the functions. That is why the following just works.

I think there either might not be a navigateToPage function on the viewModelHelper, or you might have misspelled something. I couldn't find PageId anywhere on your example, so I used d.name instead.

function MyController($scope) {

  var self = this;
  self.model = {
    id: -1,
    links: {},
  };

  self.$onInit = function() {
    self.GetLinks(self.model.id);
    self.firstRender();
  };

  self.GoBackToPage = function(PageId) {
    viewModelHelper.navigateToPage(PageId);
  };

  var links = [];
  var nodes = {};
  var w = 1400,
    h = 900;
  var force;
  var svg;
  var paths;
  var circles;
  var texts;
  var pathLabels;

  self.GetLinks = function(id) {
    viewModelHelper.apiGet("Api/GetLinks/" + id,
      null,
      function(result) {
        links = result;
        self.update();
      }
    )
  };

  self.firstRender = function() {
    force = d3.layout.force()
      .size([w, h])
      .linkDistance(200)
      .charge(-1200)
      .on("tick", tick);

    svg = d3.select("body").append("svg:svg")
      .attr("width", w)
      .attr("height", h);

    // Per-type markers, as they don't inherit styles.
    svg.append("svg:defs").selectAll("marker")
      .data(["suit", "licensing", "resolved"])
      .enter().append("svg:marker")
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -1.5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");

    paths = svg.append("svg:g");
    circles = svg.append("svg:g");
    texts = svg.append("svg:g");
    pathLabels = svg.append("svg:g");
  }

  self.update = function() {
    // Compute the distinct nodes from the links.
    links.forEach(function(link) {
      link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
      });
      link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
      });
    });

    force
      .nodes(d3.values(nodes))
      .links(links)
      .start();

    var path = paths.selectAll("path")
      .data(force.links());

    path.exit()
      .remove();
    path.enter()
      .append("svg:path");

    path.attr("id", function(d) {
        return d.source.index + "_" + d.target.index;
      })
      .attr("class", function(d) {
        return "link " + d.type;
      })
      .attr("marker-end", function(d) {
        return "url(#" + d.type + ")";
      });

    var circle = circles.selectAll(".circle")
      .data(force.nodes());

    circle.exit()
      .remove();
    circle.enter()
      .append("svg:circle")
      .attr("class", "circle")
      .attr("r", 16)
      .on("dblclick", function(d) {
        self.GoBackToPage(d.name)
      })
      .call(force.drag);

    var text = texts.selectAll("g")
      .data(force.nodes());

    text.exit()
      .remove();
    text.enter()
      .append("svg:text")
      .attr("x", 2)
      .attr("y", 50) //".31em"

    text.text(function(d) {
      return d.name;
    });

    var pathLabel = pathLabels
      .selectAll(".path_label")
      .data(force.links());

    pathLabel.exit().remove();
    pathLabel.enter()
      .append("svg:text")
      .attr("class", "path_label")
      .append("svg:textPath")
      .attr("startOffset", "50%")
      .attr("text-anchor", "middle")
      .style("fill", "#000")
      .style("font-family", "Arial");

    pathLabel
      .attr("xlink:href", function(d) {
        return "#" + d.source.index + "_" + d.target.index;
      })
      .text(function(d) {
        return d.type;
      });
  }

  // Use elliptical arc path segments to doubly-encode directionality.
  function tick() {
    paths.selectAll("path").attr("d", function(d) {
      var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
      return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

    circles.selectAll("circle").attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

    texts.selectAll("text").attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  }
}

angular.module("app", [])
  .controller("ctrl", MyController);

var viewModelHelper = {
  apiGet: function(a, b, then) {
    setTimeout(
      function() {
        console.log("Response from server");
        then(viewModelHelper.links);
      },
      2000
    );
  },
  navigateToPage: function(pageId) {
    console.log("Navigate to page", pageId);
  },
  links: [{
      source: "Microsoft",
      target: "Amazon",
      type: "licensing"
    },
    {
      source: "Microsoft",
      target: "HTC",
      type: "licensing"
    },
    {
      source: "Samsung",
      target: "Apple",
      type: "suit"
    },
    {
      source: "Motorola",
      target: "Apple",
      type: "suit"
    },
    {
      source: "Nokia",
      target: "Apple",
      type: "resolved"
    },
    {
      source: "HTC",
      target: "Apple",
      type: "suit"
    },
    {
      source: "Kodak",
      target: "Apple",
      type: "suit"
    },
    {
      source: "Microsoft",
      target: "Barnes & Noble",
      type: "suit"
    },
    {
      source: "Microsoft",
      target: "Foxconn",
      type: "suit"
    },
    {
      source: "Oracle",
      target: "Google",
      type: "suit"
    },
    {
      source: "Apple",
      target: "HTC",
      type: "suit"
    },
    {
      source: "Microsoft",
      target: "Inventec",
      type: "suit"
    },
    {
      source: "Samsung",
      target: "Kodak",
      type: "resolved"
    },
    {
      source: "LG",
      target: "Kodak",
      type: "resolved"
    },
    {
      source: "RIM",
      target: "Kodak",
      type: "suit"
    },
    {
      source: "Sony",
      target: "LG",
      type: "suit"
    },
    {
      source: "Kodak",
      target: "LG",
      type: "resolved"
    },
    {
      source: "Apple",
      target: "Nokia",
      type: "resolved"
    },
    {
      source: "Qualcomm",
      target: "Nokia",
      type: "resolved"
    },
    {
      source: "Apple",
      target: "Motorola",
      type: "suit"
    },
    {
      source: "Microsoft",
      target: "Motorola",
      type: "suit"
    },
    {
      source: "Motorola",
      target: "Microsoft",
      type: "suit"
    },
    {
      source: "Huawei",
      target: "ZTE",
      type: "suit"
    },
    {
      source: "Ericsson",
      target: "ZTE",
      type: "suit"
    },
    {
      source: "Kodak",
      target: "Samsung",
      type: "resolved"
    },
    {
      source: "Apple",
      target: "Samsung",
      type: "suit"
    },
    {
      source: "Kodak",
      target: "RIM",
      type: "suit"
    },
    {
      source: "Nokia",
      target: "Qualcomm",
      type: "suit"
    },
    {
      source: "Pippo",
      target: "Pippo"
    },
    {
      source: "Paperino",
      target: "Pippo",
      type: "suit"
    }
  ],
};

path {
  fill: none;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div ng-app="app" ng-controller="ctrl">
</div>

Ruben Helsloot 11941

Source: stackoverflow.com

[Solved]-Call custom made function from svg element using AngularJs and D3.js-d3.js

Related Query

More Query from same tag