У меня есть таблица ie с 38 пунктами. Радиус довольно большой, и поэтому текст поворачивается внутрь. Единственная проблема у меня в том, что текст стоит вверх ногами. Я попытался исправить это с помощью обычного вращения, но это не сработало, поскольку оно вращалось вокруг центра всего моего графика. Я искал ответы и нашел что-то подобное. Я попытался использовать этот код для своих собственных целей, но не смог.
Я также проверил пример на b.locks и насколько я понимаю: вот они поверните, а затем просто поместите его в то место, где он был раньше.
Мой текст сделал много вещей, но вряд ли то, что я хотел. С текущим состоянием он складывает все в середине моего графика.
Вот мой код:
var margin = { left:80, right:100, top:50, bottom:100 },
height = 1200 - margin.top - margin.bottom,
width = 1280 - margin.left - margin.right,
cwidth = 50;
var svg = d3.select("#pie-chart svg")
.append("g")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + 525 + "," + 450 + ")")
.append("g")
/*gives the same numeric value to every object in the datafile (cuz they dont have numeric values) */
var pie = d3.pie()
.value(function(d){return 1})
;
//load data
d3.json("./data/unidata.json").then(function(data){
//console.log(data);
var arc = d3.arc();
var gs = svg.selectAll("g")
.data(d3.values(data))
.enter()
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")")
;
var arcIndexDictionary = {};
var arcRingIndexSizeDictionary = {};
// Visible arc
gs.selectAll("path")
.data(function(d,i) {
return pie(d).map(function(e){e.ringIndex = i; return e});
})
.enter()
.append("path")
.attr("class", "nameArc")
.attr("id", function(d,i) {
return d.data.name + "nameArc_"+i+i;
})
.attr("d",
function(d, i) {
var innerRadius = cwidth * d.ringIndex;
var outerRadius = cwidth * (d.ringIndex + 1);
var outerRadiusSlim = cwidth * (d.ringIndex + 1) + 2 * cwidth;
// stores how many items are there in a ring in order to decide which text to flip
arcRingIndexSizeDictionary[d.ringIndex] = i;
// Main Arc - draws the rings
if (d.ringIndex == 0){
arcIndexDictionary[d.data.name + "nameArc_"+i] = (innerRadius + outerRadius) / 2.0;
return arc.innerRadius(innerRadius).outerRadius(outerRadius)(d);
}
else if (d.ringIndex == 1){
arcIndexDictionary[d.data.name + "nameArc_"+i] = (innerRadius + outerRadiusSlim) / 2.04;
return arc.innerRadius(innerRadius).outerRadius(outerRadiusSlim)(d);
}
}
)
.attr("fill", "grey")
;
// Placing text
gs.selectAll(".nameText")
.data(function(d,i) {
return pie(d).map(function(e){e.ringIndex = i; return e});
})
.enter()
.append("text")
.attr("class", "nameText")
.attr('dy', function(d, i, array){
var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
})
.append("textPath")
.attr("xlink:href",function(d, i, array){
return "#" + d.data.name + "nameArc_"+i+i;
})
.style("text-anchor", function(d, i){
var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
if(d.ringIndex == 1 && i <= ringItemCount/2) {
return "start"; //HERE
} else {
return "start"
}
})
.attr("startOffset", function(d, i){
if(d.ringIndex == 1 && i <= ringItemCount/2)
return "50%";
if(d.ringIndex == 1) return "12%";
var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
})
.text(function(d, i, array){
if (d.ringIndex > 0)
{return d.data.name};
})
.style('font-family', 'arial')
.attr('font-size', function(d){
if(d.ringIndex > 1){return '13px'} else {
return '9px';
}})
;
// ROTATE
d3.selectAll("text")
// https://stackoverflow.com/questions/26049488/how-to-get-absolute-coordinates-of-object-inside-a-g-group
.attr("transform", function(d, i){
if(d != undefined)
{
var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
var rightPieCount = ringItemCount / 2;
var halfPoint = rightPieCount / 2;
if(d.ringIndex == 1 && i <= ringItemCount/2)
{
// if you add 1 to x you need to add 180 / 19 * i
var locationData = this.getBBox();
var centerX = locationData.x + (locationData.width / 2);
var centerY = locationData.y + (locationData.height / 2);
// Fix their centralized locations
/*
if (locationData.y < 0){
centerX = centerX + i * 7;
centerY = centerY - (halfPoint - i) * 6;
} else {
centerX = centerX + (rightPieCount - i) * 7;
centerY = centerY - (-(halfPoint - i) * 6);
} */
console.log(centerX, centerY);
var result = "";
result += 'translate(' + centerX + ',' + centerY + ')';
result += 'rotate(180)';
return result;
}
}
})
;
// middle text
gs.append("text")
.attr("text-anchor", "middle")
.attr('font-size', '0.8em')
.attr('font-family', 'arial')
.style('fill', 'white')
.text("Inf FB")
})
Я также добавляю свой набор данных в сокращенной версии ниже. Поскольку я новичок в D3, я был бы очень признателен, если бы кто-нибудь сказал мне, как добиться того, чтобы текст вращался на месте, или направил меня в другом направлении, чтобы достичь своей цели :) Большое спасибо.
{ "Leitsatz": [],
"Profs": [
{
"name": "Softwarekonstruktion"
},
{
"name": "Verteilte Systeme"
},
{
"name": "Angew. Softwaretechnik"
},
{
"name": "Sicherheit"
},
{
"name": "(W1) Sicherheit/ Sicherheitsmgmt."
},
{
"name": "Rechennetze"
},
{
"name": "Theoretische Inf."
},
{
"name": "(W1) Theoretische Inf.)"
},
{
"name": "(W1) Informatikbildung)"
},
{
"name": "(W1) Mobile Services"
},
{
"name": "(W1TT) Informatik"
},
{
"name": "Wiss. Rechnen (DKRZ)"
},
{
"name": "Wiss. Visualisierung (Dir. RRZ)"
},
{
"name": "Daten Enginieering"
},
{
"name": "Simulation & Visualisierung"
},
{
"name": "Alg. Molekulares Design"
},
{
"name": "(W1) Angewandte Bioinf."
},
{
"name": "Rechnerg. Bioinformatik"
},
{
"name": "Maschinelles Lernen"
},
{
"name": "Autonome Systeme"
},
{
"name": "(W1TT) Sem. Systeme"
},
{
"name": "Wissenstechnologien"
},
{
"name": "Signalverarbeitung"
},
{
"name": "Bildverarbeitung"
},
{
"name": "(W1TT) Assistenzsysteme"
},
{
"name": "Sprachverarbeitung"
},
{
"name": "Sprachtechnologie"
},
{
"name": "Multimodale Systeme"
},
{
"name": "Mensch-Computer-Interaktion"
},
{
"name": "Usability & Softwareergonomie"
},
{
"name": "Ethik in der Informationstechnik"
},
{
"name": "IT-Gestaltung"
},
{
"name": "(W1TT) Wirtschaftsinformatik"
},
{
"name": "(W1TT) Betriebssystem"
},
{
"name": "(W1TT) Adaptive Systeme"
},
{
"name": "IT Management"
},
{
"name": "Digital Technochange"
},
{
"name": "Datenbanken"
}
]
}