Links inside custom HTML or SVG

Classic Servoy
1

[attachment=0]Screenshot 2018-10-08 at 09.51.07.png[/attachment]

Hi, I’m trying to make my own component for displaying D3.js graphics from a database table.

I can get the graphs to display, but not to get links to work. I want to execute methods when users click certain items in the graphs (D3.js executes to produce SVG graphics, so the links are on SVG nodes). I have tried adding ‘svy-click’ attributes and added a $compile directive to .js file of the compoent.

HTML:

<div class="d3-body" style="width: 100%; height: 100%; background: white;">
    <div dynamic="model.html"></div>
</div>

JS:

angular.module('samplegraphD3simple',['servoy']).directive('samplegraphD3simple', function() {  
    return {
      restrict: 'E',
      scope: {
    	  model: "=svyModel",
    	  api: "=svyApi",
    	  svyServoyapi: "=",
    	  handlers: "=svyHandlers"
      },
      controller: function($scope, $element, $attrs) {
    	  $scope.click = function(arg) {
    		  console.log('Clicked ' + arg);
    	  }
    	  
    	  $scope.showAlert = function(message) {
    	      alert(message);
    	      console.log("alerted!");
    	  };
     },
      templateUrl: 'samplegraph/d3simple/d3simple.html',
      replace: true
    }
}) .directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: { dynamic: '=dynamic'},
        link: function postLink(scope, element, attrs) {
          scope.$watch( 'dynamic' , function(html){
            element.html(html);
            $compile(element.contents())(scope);
            console.log("complied!");
          });
          
          scope.showAlert = function(message) {
              alert(message);
              console.log("alerted!");
            };
        }
      };
    });

I can see the “compiled!” messages in the console.

Any ideas of what may be wrong?

Screenshot 2018-10-08 at 09.51.07.png
Screenshot 2018-10-08 at 09.51.07.png502×674 15.7 KB

2

[attachment=0]Screenshot 2018-10-08 at 09.51.59.png[/attachment]

I can see my svy-click attribute inside the SVG graphic.

Screenshot 2018-10-08 at 09.51.59.png
Screenshot 2018-10-08 at 09.51.59.png844×152 33.8 KB

3

Does the element I apply the “svy-click” to need to have a unique identifier?

4

I have worked out how to do this now:
Instead of making a generic component and trying to load D3.js code into it, I’m making one component per type of graph.

The graph is built inside the link function:

link: function($scope, $element, $attrs) {
 
    	  function draw_graph() {
<lots of d3.js code>
          }

When I want a link, I use a standard d3.js .on(“click”

You can do things like this:

	              .on("click", function(d) { $scope.handlers.gotoMethodMethodID('purchase_invoices_for_product', d.key, $scope.model.cost_type_filter); } );

In my .spec i have a handler:

,"handlers":
	{
	        "gotoMethodMethodID" : {
	        	"parameters": [
								{ "name":"destination", "type":"string"},
								{ "name":"project_id", "type":"int"},
								{ "name":"filter_id", "type":"int"}
							 ]
	        }
	        
	}

With this I can put a standard Servoy method on the form and attach it to the “gotoMethod” of the component in Properties.