angular.js和d3.js - 几何示例

Question

我画了Limaçon和d3.js（请参阅jsfiddle）。当您移动点沿x轴（我称之为变量px形状修改了一下。

http://mathworld.wolfram.com/images/eps-gif/LimaconEnvelope_800.gif

我想复制angular.js例子（jsfiddle，改变div的RGB色彩与滑条）;？滑块与我d3.js代码px变量绑

如何将我的jsfiddle进行修改，以添加该用户互动是像onclick()

我想围绕移动滑块？并更改变量'px'在我的脚本中水平移动一个点。然后我必须重新计算一组圆的半径。

---

我知道有在这里一点点：D3 within an AngularJS app

Answer 1

您可以检查这里的工作示例：http://jsfiddle.net/fRgtF/3/ 基本上你需要做的针对范围控制器内的一切：

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"); 
    }); 

} 

您的滑块正在修改范围上的px值，这是我们使用的值。我们观察范围内的px值，并根据新的px值重做我们的d3工作。