4

d3.js のビジュアライゼーションに問題があります。

「複数の小さな」ビジュアライゼーションを取り入れた、ほぼ同一のビジュアライゼーションを含む 3 つのグループがあります。ビジュアライゼーションにはタイムラインが組み込まれており、変更時に適切なデータ ポイントを追加/削除する必要があります。更新を行うコードは次のとおりです。

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
        //Draw web for each channel
        for (channel in channels) {
            this.circles[channel] = this.web[channel].selectAll("circle")
                   .data(this.displayedNodes, function (d) {
                       return d.id;
                   });

            this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();

            this.circles[channel].enter()
                   .append("circle")
                   .attr("class", "person")
                   .attr("r", 0)
                   .attr("cx", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).x;
                   })
                   .attr("cy", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).y;
                   })
                   .attr("fill", function (d) {
                       //return chart.clusterColors[d.cluster];
                       return chart.colors[channel];
                   })
                   .attr("stroke-width", 2)
                   .attr("stroke", function (d) {
                       return d3.rgb(chart.colors[channel]).darker();
                   })
                   .attr("id", function (d) {
                       return "bubble_" + d.id;
                   })
                   .on("mouseover", function (d, i) {
                       return chart.show_details(d, i, this);
                   })
                   .on("mouseout", function (d, i) {
                       return chart.hide_details(d, i, this);
                   });
        }

.exit().transition().remove() 部分は何もしません。データ値が 0 になったため、円はスライドするだけです。ただし、Chrome コンソールを開いて、これが評価されるものとまったく同じものを手動で入力すると、それは正常に動作します。これは JavaScript の非同期モデルと関係があると思います。私は JS の達人ではないので、ここで少し途方に暮れています。これは他のどの言語でも問題ないはずです...

どんなアイデアでも大歓迎です！

コメントが巨大化しているため、コメントから追加するには：

作業例: http://www.student.dtu.dk/~s103826/ コード: https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js

問題を確認するには: タイムライン上の灰色の四角形をデータのない最後の領域にドラッグします (エッジをドラッグしてサイズを変更します)。円は表示どおりに消えますが、消えexit().transition().remove()ません。ただし、その領域にブレーク ポイントを設定し、Chrome コンソールで同じように入力すると、動作します。

4

1 に答える 1

3

Lars の助けに感謝します。既存の更新選択を使用するのではなく、すべてのサークルを再選択していましたthis.circles:)

私は今、ばかげていると感じています。

于 2013-11-13T20:59:45.407 に答える