4

我用（见jsfiddle ）画了一个Limaçon。当您沿 x 轴移动该点时（我称此变量为形状会发生一些变化。d3.jspx


（来自 MathWorld - Wolfram 网络资源：wolfram.com）

我想复制一个 angular.js 示例（jsfiddle，使用滑块更改 div 的 RGB 颜色）；滑块与px我的 d3.js 代码中的变量绑定。

如何修改我的 jsfiddle 以添加此用户交互？是这样onclick()吗？

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

我知道这里有一点：AngularJS 应用程序中的 D3

4

1 回答 1

3

您可以在此处查看工作示例：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 工作。

于 2013-03-14T05:43:40.077 回答