4

でリマソンを描きました（ jsfiddleをd3.js参照）。ポイントを x 軸に沿って移動すると (私はこの変数を変数と呼びます) 、形状が少し変化します。px


(MathWorld から - Wolfram Web リソース: 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 に答える