D3.js La Légende Des Étiquettes

J'ai un graphique circulaire, avec une légende, que j'ai fait dans D3.js. Un fichier PHP analyse JSON, et alors que les données sont utilisées pour remplir le tableau. Tout fonctionne de la manière que je le veux, sauf que je ne peut pas obtenir la légende des étiquettes pour correspondre avec la bonne couleur. Voici mon code

var w = 490,
h = 400,
r = 180,
inner = 70,
color = d3.scale.category20c();
d3.json("script.php", function (data) {
var max = d3.max(data, function(d) { return d.value; });
var sum = d3.sum(data, function(d) { return d.value; });
var vis = d3.select("#chart")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r * 1.5 + "," + (r + 10) + ")")
var arc = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r);
var arcOver = d3.svg.arc()
.innerRadius(inner + 5)
.outerRadius(r + 5);
var arcLine = d3.svg.arc()
.innerRadius(inner)
.outerRadius(inner + 5);
var pie = d3.layout.pie()
.value(function(d) { return d.value; });
var textTop = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textTop")
.text( "TOTAL" )
.attr("y", -10),
textBottom = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textBottom")
.text(sum.toFixed(2) + "m")
.attr("y", 10);
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
.on("mouseover", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arcOver)
textTop.text( d3.select(this).datum().data.label )
textBottom.text( d3.select(this).datum().data.value.toFixed(2) + "m")
})
.on("mouseout", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arc);
textTop.text( "TOTAL" )
textBottom.text(sum.toFixed(2) + "m");
});
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
var legend = d3.select("#chart").append("svg")
.attr("class", "legend")
.attr("width", 100)
.attr("height", 350)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
})

JSFIDDLE

Je pense que j'ai réduit le problème à .text(function(d) { return d; });. Maintenant, je suis en supposant qu'elle retourne le numéro d'index. Si je change cette ligne à .text(function(d, i) { return data[i].label; });, les étiquettes ne correspondent pas correctement avec les couleurs. J'ai eu cette légende de ici. J'ai regardé d'autres exemples (je ne peux pas le lien entre eux parce que ma réputation n'est pas assez élevé), et je n'arrivais pas à les intégrer correctement.

Quelqu'un peut-il m'aider à comprendre quel est le problème? Merci!

Pas sûr de ce que tu veux dire. Les étiquettes semblent être désactivé par un (parce que vous êtes à l'aide de l'index), mais en dehors de ça, elle semble être correct.
Dans la légende, il y a un numéro à côté de chaque boîte colorée. Ce ne sont pas les étiquettes. Ils sont juste les numéros d'index (je suppose). J'ai besoin de les étiquettes pour être mis il y a lieu, et de la faire correspondre avec la couleur correcte. Si vous remplacez .text(function(d) { return d; }); avec .text(function(d, i) { return data[i].label; });, vous verrez peut-être ce que je veux dire (Vous pouvez passer la souris sur chaque tranche pour voir la bonne étiquette/couleur)

OriginalL'auteur TFischer | 2013-06-18

  1. 13

    Pour obtenir les étiquettes la droite, passer les mêmes données que vous utilisez pour le graphique de la légende:

    var legend = d3.select("#chart").append("svg")
.attr("class", "legend")
.attr("width", r)
.attr("height", r * 2)
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) { return color(i); });
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d.label; });

    Jsfiddle ici.

    Cela a fonctionné! Merci beaucoup

    OriginalL'auteur Lars Kotthoff