La création d'un Texte Étiqueté de l'Axe des x avec une Échelle Ordinale en D3.js
Je suis en train de construire un graphique à barres d3.js avec un nombre ordinal de l'axe des x dont les tiques doivent étiquette, le tableau avec du texte. Quelqu'un pourrait-il expliquer comment l'échelle ordinale "cartes" x tiques à la correspondante de la barre de positions? Plus précisément, si je veux désigner le x étiquettes de graduation avec un tableau de valeurs de texte pour les barres correspondantes dans un graphique à barres.
Actuellement, je suis en définissant le domaine comme suit:
var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
var xScale = d3.scale.ordinal()
.domain(labels)
Cependant, les valeurs de 1 à 19 sont, après les étiquettes de texte.
Comme on le voit dans ce violon:
http://jsfiddle.net/chartguy/FbqjD/
Associés Tripoter Le Code Source:
//Width and height
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 600 - margin.left - margin.right;
var height= 500-margin.top -margin.bottom;
var w = width;
var h = height;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
var xScale = d3.scale.ordinal()
.domain(labels)
.rangeRoundBands([margin.left, width], 0.05);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([h,0]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return h - yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, 0)";
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 0 + ")")
.call(xAxis);
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
OriginalL'auteur arete | 2013-06-21
Vous devez vous connecter pour publier un commentaire.
Vous pouvez définir la tique valeurs de l'ordinal de l'axe explicitement à l'aide de
d3.svg.axis().tickValues(*array*)
.Mais c'est une drôle de façon de le faire car c'dangereusement sépare vos clés et des valeurs, ce qui signifie que vous devez prendre soin d'aligner manuellement la balance et assurez-vous que vos données correspond correctement. Il permet de regrouper les clés et valeurs dans un seul objet, puis utilisez le format:
à la carte de votre axe de domaines.
J'ai retravaillé vos données et de violon à faire dans ce que je considère comme le plus d3 façon. (Notez aussi que j'ai fait quelques autres changements juste pour le fun, à savoir améliorer les marges et nettoyé l'alignement de l'axe, etc.)
C'est parce que vous êtes à la définition du domaine explicitement avec un jeu de données, puis passer à un autre jeu quand vous ne
.attr("x", function(d, i) { return xScale(i); })
. Le ligne à partir de la référence de l'API dit: "Si le domaine est définie de manière explicite, des valeurs transmises à l'échelle qui n'étaient pas explicitement partie du domaine sera ajouté." À cette fin, vous remarquerez peut-être que dans votre code original de l'appel de l'axe des x avant de rectangles résultat sera seulement votre explicite tableau appelé.OriginalL'auteur nsonnad