文本沒有被轉換到正確的位置

我有一個json數據，其中有翻譯位置，並且我用我創建的函數連同質心一起返回該數據。當我運行這段代碼，文本在沿底部一條直線上運行：文本沒有被轉換到正確的位置

var prac = svg.append("g.prac") 
      .data(inner) 
      .enter() 
      .append("g") 
      .attr("transform", function(d,i){return "translate ("+ arc[i].centroid() +")" + d.trans;}); 

     prac.append("text") 
      .style("font", "bold 12px Arial") 
      .text(function(d) {return d.text;}) 
     ;

我也試圖追加（SVG：文本），而不是分組，但它只是不出現。

任何人都可以幫我解決我的問題嗎？ ...我附上了一個例子，以使我的問題更加清晰：http://jsfiddle.net/xwZjN/48/

來源

2012-11-21 Jose

沒有足夠的時間讓你一直在那裏，但我認爲關鍵的問題是那些'g'元素實際上並沒有附加到你的'g.prac'元素 - 說到這個''' svg.append（「g.prac」）附加一個''而不是''。 –

是的 - 只是檢查，他們被追加到頁面的底部（在「」之後，偶數）。這可能就是爲什麼文本顯示在哪裏。如果你還沒有使用它，谷歌瀏覽器開發者工具使'd3'工作變得更容易 - 「元素」標籤確實有助於追蹤那些未被追加到你認爲應該是的地方。強烈推薦。 –

@MattParker感謝您的提示！但是，我怎樣才能防止它被追加到底部？ – Jose

一個問題是您要追加<g.prac>元素而不是<g class='prac'>元素。爲了解決這個問題，開關的代碼看起來像這樣：

svg.append("g.prac")

與此：

svg.append("g").attr("class", "prac")

其次，更重要的是，你需要選擇你要綁定您的數據，該元素 - 即使他們還沒有創建（斯科特默裏有a nice explanation of this）。所以，你的prac應作出這樣的：

svg.append("g") 
    .attr("class", "prac") 
    .selectAll("g") 
    .data(inner) 
    .enter() 
    .append("g") 
    .attr(...)

這裏就是我做了那的jsfiddle轉換兩種g.prac和g.presence：http://jsfiddle.net/c6w7j/4/

我認爲，讓你的存在方式的一部分。我不確定那個文本是否真的在你想要的地方登陸，但是這至少應該修復你的結構。

來源

2012-11-21 21:55:56

不，這很好，我會把它們放在我想要的地方。只是一個快速的問題，你看到了var的存在。我從JSON數據（美國，美國等）重複文本，是一種過濾出來的方式，所以它只重複一次文本 - 即使有多個文本。 – Jose

獲得獨特的價值觀可能是一個痛苦的屁股。嘗試類似'var countries = d3.nest（）.key（function（d）{return d.Country;}）。entries（nodes）;'這可能需要工作才能正確地獲得輸出結構， 'nest'，'key'，'rollup'，'map'和'entries']（https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_nest）應該可以幫到你。 –

文本沒有被轉換到正確的位置

回答

相關問題