Question

我使用d3.js绘制了Limaçon（请参阅jsfiddle）。当你沿着x轴移动点时（我称这个变量px，形状会有所改变。

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

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

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

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

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

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

1 个答案: