Comment faire wordwrap pour les étiquettes de graphique en utilisant d3.js

Je suis en train de mettre en œuvre le graphique à barres horizontales à l'aide de d3.js.Certains des étiquettes de diagramme sont trop longs.
Comment faire des retour à la ligne automatique pour le graphique des étiquettes sur l'axe des aixs?

Code Source:

var data = [{"Name": "Label 1", "Count": "428275" }, { "Name": "Label 2", "Count": "365005" }, { "Name": "Label 3", "Count": "327619" }];
var m = [30, 10, 10, 310],
w = 1000 - m[1] - m[3],
h = 550 - m[0] - m[2];
var format = d3.format(",.0f");
var x = d3.scale.linear().range([0, w + 10]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .4);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(h),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
$("#chartrendering").empty();
var svg = d3.select("#chartrendering").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
//Set the scale domain.
x.domain([0, d3.max(data, function (d) { return d.Count; })]);
y.domain(data.map(function (d) { return d.Name; }));
var bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function (d) { return "translate(0," + y(d.Name) + ")"; });
bar.append("rect")
.attr("width", function (d) { return x(d.Count); })
.attr("height", y.rangeBand());
bar.append("text")
.attr("class", "value")
.attr("x", function (d) { return x(d.Count); })
.attr("y", y.rangeBand() / 2)
.attr("dx", +55)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function (d) { return format(d.Count); });
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);

source d'informationauteur user2238971

  1. 9

    Ici est un travail de mise en œuvre que j'ai écrit en rassemblant différents bits. Comme l'autre réponse suggère, foreignObject est encore le chemin à parcourir. D'abord la fonction:

    var insertLinebreaks = function (t, d, width) {
var el = d3.select(t);
var p = d3.select(t.parentNode);
p.append("foreignObject")
.attr('x', -width/2)
.attr("width", width)
.attr("height", 200)
.append("xhtml:p")
.attr('style','word-wrap: break-word; text-align:center;')
.html(d);    
el.remove();
};

    Cela prend dans un élément de texte (t), le contenu du texte (d), et la largeur de l'enroulement. Elle obtient ensuite le parentNode de la text objet, et attache une foreignObject nœud dans lequel un xhtml:p est ajouté. Le foreignObject est de régler la width et le décalage -width/2 au centre. Enfin, le texte original de l'élément est supprimé.

    Cela peut ensuite être appliqué à votre axe éléments comme suit:

    d3.select('#xaxis')
.selectAll('text')
.each(function(d,i){ insertLinebreaks(this, d, x1.rangeBand()*2 ); });

    Ici, j'ai utilisé rangeBand pour obtenir la largeur (avec *2 pour les 2 barres sur le graphique).

    Comment faire wordwrap pour les étiquettes de graphique en utilisant d3.js

  2. 5

    J'étais à la recherche de solutions à ce problème, et a constaté que Mike Bostock a publié un exemple de travail à l'aide de D3. L'exemple est illustré à travailler pour l'axe des x, mais peut facilement être adapté pour l'axe des y.

  3. 1

    Vous ne pouvez pas le faire automatique de la parole envelopper dans du SVG. Vous pouvez utiliser foreignObject et HTML divs à cette fin, mais cela nécessiterait de modifier le code qui crée des étiquettes de l'axe. Alternativement, vous pouvez faire pivoter les étiquettes de l'axe, de sorte qu'ils ont plus d'espace. Voir, par exemple, ici pour savoir comment faire.

  4. 0

    Voici un code à l'aplomb Mike Bostock est chart() fonction dans angulaires-nvd3. Pour l'historique, voir https://github.com/krispo/angular-nvd3/issues/36.

            discretebar: {
dispatch: {
renderEnd: function(e){
d3.selectAll(".tick text").call(wrap,_chart.xAxis.rangeBand());
}
}
},
callback: function(chart){
_chart = chart; //global var
}
}