0

ここに画像の説明を入力

http://jsfiddle.net/pPMqQ/146/

少しの動きを提供するために、フォース チャートの派生物であるバブル チャート アプリケーションを開発しています。

コードの一部を次に示します。svg を作成するときに、viewBox も設定します。これは、グラフのサイズを調整するために使用できると思いますが、比率を適切に調整して正しいスケーリングを得ることができませんでした。

ノードを追加するコードもここに追加しました。ノードのサイズが計算されるので、スケール変数を使用してオーブのサイズに影響を与えます。

                                 var svg = d3.select(selector)
                            .append("svg")
                                .attr("class", "bubblechart")
                                .attr("width", parseInt(w + margin.left + margin.right,10))
                                .attr("height", parseInt(h + margin.top + margin.bottom,10))
                                .attr('viewBox', "0 0 "+parseInt(w + margin.left + margin.right,10)+" "+parseInt(h + margin.top + margin.bottom,10))
                                .attr('perserveAspectRatio', "xMinYMid")
                            .append("g")
                                .attr("transform", "translate(0,0)");

                            methods.force = d3.layout.force()
                              .charge(1000)
                              .gravity(100)
                              .size([methods.width, methods.height])


                            var bubbleholder = svg.append("g")
                                    .attr("class", "bubbleholder")


                            var bubbles = bubbleholder.append("g")
                                    .attr("class", "bubbles")

                            var labelbubble = bubbleholder.append("g")
                                    .attr("class", "labelbubble")






                        // Enter
                        nodes.enter()
                            .append("circle")
                             .attr("class", "node")
                              .attr("cx", function (d) { return d.x; })
                              .attr("cy", function (d) { return d.y; })
                              .attr("r", 1)
                              .style("fill", function (d) { return methods.fill(d.label); })
                              .call(methods.force.drag);

                        // Update
                        nodes
                            .transition()
                            .delay(300)
                            .duration(1000)
                              .attr("r", function (d) { return d.radius*scale; })

                        // Exit
                        nodes.exit()
                            .transition()
                            .duration(250)
                            .attr("cx", function (d) { return d.x; })
                            .attr("cy", function (d) { return d.y; })
                            .attr("r", 1)
                            .remove();

残りの問題があります

  1. スケーリングが問題

データ属性を介して幅/高さを設定しました。現在、チャートの幅に応じてオーブのサイズを調整するスケーリング変数を設定しています。それに応じてグラフのサイズが変更され、要素が常に中心にあるようにする（不明瞭にならない）ためのより科学的な方法を見つけたいと思います。

ここに画像の説明を入力

  1. 小さな要素が大きな要素の上にあることを確認する小さなオブジェクトが大きなオーブの下にランダムに落ちる可能性があることにも気付きました。サイズに応じてオーブのレンダリングを整理する方法はありますか?大きな要素は常に最下層に配置されます. ここに画像の説明を入力
4

1 に答える 1

0

値を介してデータをソートすることで、2 番目の問題を解決しました。

http://jsfiddle.net/pPMqQ/149/

data = data.sort(function(a, b) {return b.value - a.value})

現在、チャートの幅に応じたスケール変数があります - var scale = methods.width*.005;

しかし、それは言うまでもなくあまり科学的ではありません

グラフの幅が 150 の場合 http://jsfiddle.net/pPMqQ/150/

グラフはレンダリングされますが、バブルはスペースに収まりません。

250 px のグラフ http://jsfiddle.net/pPMqQ/151/

于 2014-04-16T18:08:24.280 に答える