強制レイアウトを使用してレイアウトしたグラフがあります。基本的に、グラフのサイクル内に含まれる領域に色を付けたいと思います。これが私のコードです。
フォースの配置が安定したときのサイクルをペイントしようとしていました。
force.on("tick",function(){
// ... I update the position of nodes and the links
if(force.alpha() < 0.006){
force.stop();
// I dont know if there's an easier way of doing this
var xnodes = [];
force.nodes().forEach(function(d){
xnodes.push([d.x, d.y]);
});
// I tried creating a path and filling with with green
vis.select("path.area")
.data([xnodes])
.enter().append("path")
.style("fill", "#00ff00")
.attr("class", "area")
.attr("svg:d", d3.svg.area());
}
});
クロムで実行すると、デバッガーはパスを作成することを示しますが、パスの領域は 0px x 0px です。私はこれと本当に混乱しています。アレイを手動で設定してみました。同じエラーが発生します。
var ynodes = [[352.3554660996234,304.3361316660001],[449.88953454311286,313.14153937680953],
[392.0458559272036,389.6656922220398],[352.3554660996234,304.3361316660001]];
vis.select("path.area")
.data([ynodes])
.enter().append("path")
.style("fill", "#00ff00")
.attr("class", "area")
.attr("svg:d", d3.svg.area());
ただし、このコードを空の html ファイルに入れると (必要なライブラリを含めた後)、正常に動作します。パスを描画し、緑で塗りつぶします。私はここで本当に混乱しています。どんな助けでも大歓迎です。ありがとう。