1

D3初心者です。私の目標は、マップを作成し、その上に領域を定義して SVG レイヤーを描画し、それらの領域にラベルを付けることでした。

ラベルにバグがあります。それらを正常に追加できますが、画面移動およびズームすると、マップと共に移動しません。テキスト ラベルに対して決定された 'x' および 'y' の値と関係があるように感じますが、値がどうあるべきかわかりません。

adminDivisions.selectAll("text")
.data(geoJson.features)
.enter()
.append("text")
.text(function(d){
   return d.properties.title;
})
.attr("x",function(d){
   return path.centroid(d)[0];
})
.attr("y", function(d){
   return path.centroid(d)[1];
});

私のコードはこれに基づいています: d3 パスを Google マップにオーバーレイしますか? そしてこれ：州の名前をd3.jsのマップに追加します

サンプルコード付きの JSFiddle: http://jsfiddle.net/vZmrZ/

どんなアドバイスも素晴らしいでしょう！

4

1 に答える 1

5

I figured out the answer! The x and y attributes needed to be called twice, once before 'entering' and once after 'entering' so that it gets updated whenever the map moves. No more panning and zooming issues :)

adminDivisions.selectAll("text")
                    .data(geoJson.features)
                    .attr("x",function(d){
                        return path.centroid(d)[0];                         
                    })
                    .attr("y", function(d){
                        return path.centroid(d)[1];                         
                    }) 
                    .enter()                        
                    .append("text")
                    .text(function(d){
                        return d.properties.name;
                    })
                    .attr("x",function(d){
                        return path.centroid(d)[0];                         
                    })
                    .attr("y", function(d){
                        return path.centroid(d)[1];

                    });

Updated fiddle:http://jsfiddle.net/vZmrZ/1/

于 2013-03-11T16:39:53.823 に答える