我画了一个Limaçon使用 d3.js
(参见 jsfiddle)。当您沿 x 轴移动点时(我称此变量为 px
,形状会发生一点变化。
(来自 MathWorld - A Wolfram Web 资源:wolfram.com)
我想复制一个 angular.js 示例( jsfiddle ,使用 slider 更改 div 的 RGB 颜色); slider 与我的 d3.js 代码中的 px
变量相关联。
如何修改我的 jsfiddle 以添加此用户交互?它像 onclick()
吗?
我想四处移动 slider 并更改脚本中水平移动一个点的变量“px”。然后我必须重新计算一堆圆的半径。
我知道这里有一点:D3 within an AngularJS app
最佳答案
您可以在此处查看工作示例:http://jsfiddle.net/fRgtF/3/ 基本上,您需要在 Controller 内针对范围执行所有操作:
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");
});
}
您的 slider 正在修改示波器上的 px 值,这就是我们使用的值。我们观察示波器上的 px 值,并根据新的 px 值重做我们的 d3 工作。
关于javascript - angular.js 和 d3.js - 几何示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15401482/