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

我用

d3.js

（请参阅）绘制了一个。当你沿着x轴移动点时（我称这个变量为

px

），形状会稍微改变

（来自MathWorld-Wolfram Web资源：）

我想复制angular.js示例（，使用滑块更改div的RGB颜色）；滑块与我的d3.js代码中的

px

变量绑定

如何修改我的JSFIDLE以添加此用户交互？它是否像

onclick（）

我想移动滑块，改变脚本中水平移动一个点的变量“px”，然后我必须重新计算一组圆的半径

---

---

我知道这里有一点：

您可以在这里查看工作示例： 基本上，您需要在控制器内针对作用域执行所有操作：

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

}

功能控制器（$scope）{
$scope.$watch（“px”，函数（）{
d3.选择（'svg'）.remove（）；
var limacon=d3.select（“.limacon”）.append（“svg”）；
x0=300；
y0=250；
r=50；
px=$scope.px；
limacon.append（“圆圈”）
.attr（“cx”，x0）
.attr（“cy”，y0）
.attr（“r”，r）
.attr（“笔划”、“FFCC66”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
对于（var k=0；k<20；k++）{
limacon.append（“圆圈”）
.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（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1）
.attr（“填充”、“无”）；
}
limacon.append（“圆圈”）
.attr（“cx”，x0+px）
.attr（“cy”，y0）
.attr（“r”，1）
.attr（“笔划”，“#66CC66”）
.attr（“笔划宽度”，2）
.attr（“填充”和“#66CC66”）；
});
}

---

您的滑块正在修改作用域上的px值，这就是我们使用的值。我们观察作用域上的px值，并根据新的px值重新执行d3工作。

您不应该像这样修改控制器内的DOM。此类代码属于指令。是的，这将是最佳做法。