在dimplejs氣泡圖中的每個氣泡內顯示標籤

Question

我正在使用dimplejs製作氣泡圖。那部分完成了。我還想在泡泡內添加所有者名稱（泡泡標籤），而不僅僅是作爲圖表外的列表，但這不起作用。我應該如何繼續？

Link to the jsfiddle。

all_data = [{"Size": 126, "x": 0.57713748637776141, "y": -0.23994977513487858, "Owner": "a"}, {"Size": 394, "x": -0.23305704511539499, "y": -0.39183313136189662, "Owner": "b"}, {"Size": 127, "x": 0.12093459993205866, "y": 0.56390700220806189, "Owner": "c"}, {"Size": 624, "x": -0.46501504119442505, "y": 0.06787590428871329, "Owner": "d"}] 

var svg = dimple.newSvg("#chartContainer", 600, 200); 

var myChart = new dimple.chart(svg, all_data); 
myChart.setBounds(25, 25, 550, 150) 

var x = myChart.addMeasureAxis("x", "x"); 
var y = myChart.addMeasureAxis("y", "y"); 
x.hidden = true; 
y.hidden = true; 

myChart.addLegend(25, 5, 550, 20, "right"); 
myChart.addMeasureAxis("z", "Size"); 

var s = myChart.addSeries("Owner", dimple.plot.bubble); 

myChart.draw(); 

Answer 1

看着你的JSFiddle，有一個註釋塊接近正確的答案，但是你錯過了幾件事。第一個圓圈使用cx和cy屬性而不是x和y，所以您需要參考這些位置。其次，在繪製方法之前調用s.shapes.each，並且在繪製之後纔會填充該系列的shapes屬性。您可以在抽籤方法後，移動塊，但我已經轉向它使用series.afterDraw屬性來代替：

s.afterDraw = function (shp, d) { 
    var shape = d3.select(shp); 
    svg.append("text") 
     .attr("x", parseFloat(shape.attr("cx"))) 
     .attr("y", parseFloat(shape.attr("cy")) + 4) 
     .style("text-anchor", "middle") 
     .style("font-size", "10px") 
     .style("font-family", "sans-serif") 
     .style("opacity", 0.7) 
     .text(d.zValue); 
}; 

你更新的小提琴是在這裏：http://jsfiddle.net/acjwqpsL/2/