-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
あなたのコードを入れてください。努力したことを知るにはコードを見なければなりません;単にイメージを置くのではなく）。イメージを手助けできると思いますか？ –