dimplejs 버블 차트의 각 버블 안에 레이블 표시

dimplejs를 사용하여 버블 차트를 만듭니다. 그 부분은 끝났어. 버블 안에 소유자 이름 (버블 레이블)을 추가하고 차트 외부의 목록뿐만 아니라이 기능이 작동하지 않도록하고 싶습니다. 어떻게해야합니까?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();

출처

2014-12-06 huhahihi

JSFiddle을 보면 올바른 대답에 가까운 댓글이 달린 블록이 있었지만 몇 가지를 놓쳤습니다. 먼저 x와 y보다는 cx와 cy 속성을 사용하므로 서클의 위치를 참조해야합니다. 두 번째로 s.shapes.each를 호출하기 전에 draw 메서드와 계열의 shape 속성을 드로잉 후에 만 채 웁니다. 당신은 그리기 방법 후 블록을 이동 할 수 있지만 내가 대신 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/

출처

2014-12-07 21:04:56

주,이 답변으로 업그레이드하도록 요구 dimple.js [버전 2+] (https://github.com/PMSI-AlignAlytics/dimple/releases) – Mark

또한 [빠른 업데이트] (http://jsfiddle.net/acjwqpsL/3/)에서 "크기"대신 거품의 "소유자". – Mark

감사합니다 John and Mark! 한 가지 더, 거품이 텍스트보다 작은 경우 텍스트를 거품 외부에 놓고 싶기 때문에 거품의 반경을 어떻게 찾습니까? – huhahihi

dimplejs 버블 차트의 각 버블 안에 레이블 표시

답변

관련 문제