1

私はd3js http://d3js.orgを使い始めています。最初に必要なのはゲージアイコンだけです。オークションの終了回数と、オークションがどの状態にあるかを表示します。ページ上のアイコンが増えます。ここにフィドルがありますhttp://jsfiddle.net/TdWtC/

最初の読み込みは問題ありませんが、更新についてサポートが必要です。更新時に、バックグラウンドとポインターの両方を更新する必要があります。主な問題は、更新時にバックグラウンドがポインターと重なることです。おそらく私は完全に間違っていますが、同様のスニペットをカスタマイズしたため、先に進むことができません。

これは背景がポインターに重なる部分です

this.body.append("svg:path")
        .style("fill", color)
        .attr("d", d3.svg.arc()
        .startAngle(this.valueToRadians(start))
        .endAngle(this.valueToRadians(end))
        .innerRadius(0.4 * this.config.raduis)
        .outerRadius(this.config.raduis))
        .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });

手伝ってくれてありがとう

4

1 に答える 1

1

問題は、ゲージのバンドが独自のg要素に含まれていないことです。update を呼び出すと、ポインターの要素の後にバンドが追加され、その上に表示されます。これは、ポインタの前に追加されるg独自の要素にバンドを配置することで簡単に修正できます。gg

ここでこれらの変更を行い、コードを少し d3 化しました。バンドを個別に d3 に渡す必要はありません。同時にすべてのバンドを描画できます。呼び出し.enter()でデータを変更していないため、選択 (つまり、新しい要素)のみを処理していることに注意してください。変更されたデータに対して機能させるには、選択 (要素を削除する、おそらく単に) と更新された選択 (おそらく、選択の開始角度と終了角度を設定するために使用しているコード)update()のハンドラーを実装する必要があります。.exit()segments.exit().remove().enter()

于 2013-01-20T12:25:16.707 に答える