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工作。