Angular.js and d3.js - geometric example

Question

I drew Limasson with d3.js (see jsfiddle ). When you move a point along the x axis (I call this px variable), the shape changes a bit.

_{(from MathWorld - Wolfram web resource: wolfram.com )}

I would like to copy the angular.js example ( jsfiddle , change the color of an RGB div using sliders); the slider is connected to the px variable in my d3.js code

How can my jsfiddle be modified to add this user interaction? Is it like onclick() ?

I would like to move the slider and change the "px" variable in my script, which moves the point horizontally. Then I have to recalculate the radii of the group of circles.

---

I know a little here: D3 in AngularJS application

Answer 1

Here you can check a working example: http://jsfiddle.net/fRgtF/3/ Basically you need to do everything inside the controller depending on the scope:

 function Controller($scope){ $scope.$watch("px",function(){ d3.select('svg').remove(); var limacon = d3.select(".limacon").append("svg"); x0 = 300; y0 = 250; r = 50; px = $scope.px; limacon.append("circle") .attr("cx", x0) .attr("cy", y0) .attr("r", r) .attr("stroke", "#FFCC66") .attr("stroke-width", 2) .attr("fill", "none"); for (var k = 0; k < 20; k++) { limacon.append("circle") .attr("cx", x0 + r * Math.cos(2 * Math.PI * 0.05 * k)) .attr("cy", y0 + r * Math.sin(2 * Math.PI * 0.05 * k)) .attr("r", r * Math.sqrt(Math.sin(2 * Math.PI * 0.05 * k) * Math.sin(2 * Math.PI * 0.05 * k) + (Math.cos(2 * Math.PI * 0.05 * k) - px / r) * (Math.cos(2 * Math.PI * 0.05 * k) - px / r))) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); } limacon.append("circle") .attr("cx", x0 + px) .attr("cy", y0) .attr("r", 1) .attr("stroke", "#66CC66") .attr("stroke-width", 2) .attr("fill", "#66CC66"); }); } 

Your slider changes the px value in the area and this is the value we use. We observe the px value in scope and redo our d3 work based on the new px value.