Ubuntu-fr

Compte supprimé

[jRésolu-Jvascript] Problème avec la fonction array.map Callback

Bonjour à tous,

Voilà j'ai un problème assez étrange, j'ai un tableau data de la forme :

[{grade:"a", count:1000},
{grade:"b", count:935},
.....]

mais lorsque j'utilise la fonction map de cette façon :

var v = data.map(function (d) { return d.count; });
console.log(v);

le tableau v se retrouve avec les valeurs {0,0,0,0,0}
Si quelqu'un a une idée d'où peut venir le problème, je suis preneur.

var svg = d3.select("svg"),
    margin = { top: 20, right: 20, bottom: 30, left: 40 },
    x = d3.scaleBand().padding(0.1),
    y = d3.scaleLinear();

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("g")
    .attr("class", "axis axis--x");

g.append("g")
    .attr("class", "axis axis--y");

g.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
/*.text("Count of Product")*/;

var dm = data_manager();
var data = dm.load_histo_grade_data();

console.log(data);

x.domain(data.map(function (d) { return d.grade; }));
var v = data.map(function (d) { return d.count; });
console.log(v);
y.domain([0, d3.max(data.map(function (d) { return d.count; }))]);

draw(data);

function draw(theData) {

    var margin = {top: 10, right: 30, bottom: 30, left: 40},
	width = 300 - margin.left - margin.right,
	height = 200 - margin.top - margin.bottom;

    x.rangeRound([0, width]);
    y.rangeRound([height, 0]);

    g.select(".axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

    
    g.select(".axis--y")
	.call(d3.axisLeft(y));

    // ENTER
    g.selectAll(".bar")
	.data(theData)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function (d) { return x(d.grade); })
	.attr("y", function (d) {
	    return y(d.count); })
	.attr("width", x.bandwidth())
	.attr("height", function (d) { return height - y(d.count); })
	.attr("fill", function(d) { return color_nutriscore_grade(d.grade); } );
}

Le problème vient de la fonction load_histo_grade_data() qui utilises d3.tsv qui asynchrone, il faut donc rajouter un callback à cette fonction

Dernière modification par Compte supprimé (Le 26/12/2018, à 21:28)