-1
삼각형 블록 안에 데이터 (TEXT)를 표시해야합니다. 그러나 데이터 (TEXT)는 삼각형의 블록 안에 감싸 야합니다. 명확한 이해를 위해 아래 이미지를 참조하십시오.삼각형 안에 텍스트 감싸기 SVG
이미지가 텍스트 데이터가 모든 블록의 외부를 표시 보여, 그 삼각형의 각 블록
var svg = d3.select("#" + instanceData.id).insert("svg")
.attr("id", instanceData.id + "svg")
.attr("width", w)
.attr("height", h)
.append("g");
var data = series0;
var pyramid = d3.pyramid()
.size([w, h])
.value(function(d) {
return d.population;
});
var line = d3.svg.line()
.interpolate('linear-closed')
.x(function(d, i) {
return d.x;
})
.y(function(d, i) {
return d.y;
});
var g = svg.selectAll(".pyramid-group")
.data(pyramid(data))
.enter().append("g")
.attr("class", "pyramid-group");
g.append("path").attr({
"d": function(d) {
return line(d.coordinates);
},
"fill": function(d) {
/* console.log("test "+incr);
if(incr==0){
colorCode="rgb(255,0,0)";
}else if(incr==1){
colorCode="rgb(255,255,0)";
}else if(incr==2){
colorCode="rgb(0,128,0)";
} */
incr++;
return color(d.region);
}
});
g.append("text")
.attr({
"y": function(d, i) {
if (d.coordinates.length === 4) {
return (((d.coordinates[0].y - d.coordinates[1].y)/2) + d.coordinates[1].y) + 5;
} else {
return (d.coordinates[0].y + d.coordinates[1].y)/2 + 10;
}
},
"x": function(d, i) {
return w/2;
}
})
.style("text-anchor", "middle")
.text(function(d) {
return d.region;
});
과 혼합 제대로해야한다 우리가 당신을 위해 이것을 코드 해 주길 바란다, 그렇지? 너의 편에서의 노력없이? –
내가 노력하지 않고 있다는 것을 알고 있습니다. 이미지를 렌더링하는 코드를 작성했습니다. 유일한 관심사는 블록 내부에 데이터를 표시하는 것입니다. – Varadharajan
코드를 입력하십시오. 단순히 이미지를 넣는 것이 아니라 노력을했다는 것을 알기 위해 코드를보아야합니다.) 우리가 어떻게 이미지를 도울 수 있다고 생각하니? –