inversé l'axe Y-D3
Je suis assez nouveau à la D3. J'ai créé un diagramme en barres et mon axe Y est inversé en quelque sorte (semble aussi que l'échelle n'est pas bonne). Je ne pouvais vraiment pas le découvrir par moi-même. Voici le lien pour Jsfiddle.
C'est le code que j'y travaille, dans le cas où vous voulez l'essayer ailleurs.
Merci d'avance et désolé pour mon anglais.
var w = 700;
var h = 400;
var margin = 40;
var dataset = [
{key:1,value:4000},
{key:2,value:3500},
{key:3,value:4400},
{key:4,value:3250},
{key:5,value:4785},
{key:6,value:3600},
{key:7,value:3200}
];
var key = function(d) {
return d.key;
};
var value = function(d) {
return d.value;
};
console.log(dataset);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length+1))
.rangeRoundBands([40, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, 5000])
.range([0, h-40]);
var x_axis = d3.svg.axis().scale(xScale);
var y_axis = d3.svg.axis().scale(yScale).orient("left");
d3.select("svg")
.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+(h-margin)+")")
.call(x_axis);
d3.select("svg")
.append("g")
.attr("class","y axis")
.attr("transform","translate("+margin+",0)")
.call(y_axis);
//Create bars
svg.selectAll("rect")
.data(dataset, key)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.value)-margin;
})
.attr("fill", function(d) {
return "rgb(96, 0, " + (d.value * 10) + ")";
})
//Tooltip
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
//Update Tooltip Position & value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.value);
d3.select("#tooltip").classed("hidden", false)
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").classed("hidden", true);
}) ;
//Create labels
svg.selectAll("text")
.data(dataset, key)
.enter()
.append("text")
.text(function(d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
- Aimerais savoir comment faire cela dans nvd3.js!!
Vous devez vous connecter pour publier un commentaire.
Peut-être que cela aidera.
http://jsfiddle.net/S575k/4/
Quelques remarques:
J'ai inversé la y domaine de
.range([0, h-margin]);
à.range([h-margin, 0]);
Cela permettra de résoudre le problème de l'axe y pour les marques vont dans la mauvaise direction, car le navigateur considérer l'origine(0,0)
point à la le coin supérieur gauche, et pas le coin inférieur gauche comme en mathématiques.En raison de cette reprise, j'ai dû modifier votre
.attr('height')
et.attr('y')
.Une belle façon de se trouver la hauteur de la barre dans un graphique à barres est de constater que les
yscale(0)
vous donnera le pixel-position du fond de la barchart. Vous pouvez ensuite faireyscale(value) - yscale(0)
pour obtenir les pixels de la hauteur des barres..domain([5000, 0])
au lieu de.domain([0, 5000])
?