D3.js — échelle Ordinale (version 3 à la version 4)

Je prends un Udemy du cours sur D3.js.

Malheureusement à cause de la nouvelle version D3.js est sorti, il n'y a pas de mise à jour des tutoriels sur leur nouvelle syntaxe donc, je suis en jetant un coup d'oeil à leur API du wiki.

Cela étant dit, j'ai été coincé sur la façon de traduire ce code (version 3). Je suis en train d'apprendre échelle ordinale

var data = [
{key: "Glazed",     value: 132},
{key: "Jelly",      value: 71},
{key: "Holes",      value: 337},
{key: "Sprinkles",  value: 93},
{key: "Crumb",      value: 78},
{key: "Chocolate",  value: 43},
{key: "Coconut",    value: 20},
{key: "Cream",      value: 16},
{key: "Cruller",    value: 30},
{key: "Éclair",     value: 8},
{key: "Fritter",    value: 17},
{key: "Bearclaw",   value: 21}
];
var w = 800;
var h = 450;
var margin = {
top: 20,
bottom: 20,
left: 20,
right: 20
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d){
return d.value;
})])
.range([0, width]);
var y = d3.scale.ordinal()
.domain(data.map(function(entry){
return entry.key;
}))
.rangeBands([0, height]);
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function plot(params){
this.selectAll(".bar")
.data(params.data)
.enter()
.append("rect")
.classed("bar", true)
.attr("x", 0)
.attr("y", function(d,i){
return y(d.key);
})
.attr("height", function(d,i){
return y.rangeBand()-1;
})
.attr("width", function(d){
return x(d.value);
});
this.selectAll(".bar-label")
.data(params.data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d){
return x(d.value);
})
.attr("dx", -4)
.attr("y", function(d,i){
return y(d.key);
})
.attr("dy", function(d,i){
return y.rangeBand()/1.5+2;
})
.text(function(d){
return d.value;
})
}
plot.call(chart, {data: data});

à la version 4.

Regardant leurs API Wiki, il semble que se débarrasser rangeBand fonction Les CHANGEMENTS.MD

J'ai essayé de mon mieux de traduire, mais je ne peux pas comprendre ce que c'est faux:

var data = [
{key: "Glazed",     value: 132},
{key: "Jelly",      value: 71},
{key: "Holes",      value: 337},
{key: "Sprinkles",  value: 93},
{key: "Crumb",      value: 78},
{key: "Chocolate",  value: 43},
{key: "Coconut",    value: 20},
{key: "Cream",      value: 16},
{key: "Cruller",    value: 30},
{key: "Éclair",     value: 8},
{key: "Fritter",    value: 17},
{key: "Bearclaw",   value: 21}
];
var w = 800;
var h = 450;
var margin = {
top: 20,
bottom: 20,
left: 20,
right: 20
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return d.value;
})])
.range([0, width]);
var y = d3.scaleOrdinal()
.domain(data.map(function(entry){
return entry.key;
}))
.range([0, height]);
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function plot(params){
this.selectAll(".bar")
.data(params.data)
.enter()
.append("rect")
.classed("bar", true)
.attr("x", 0)
.attr("y", function(d,i){
return y(d.key);
})
.attr("height", function(d,i){
return y.range(1)-1;
})
.attr("width", function(d){
return x(d.value);
});
this.selectAll(".bar-label")
.data(params.data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d){
return x(d.value);
})
.attr("dx", -4)
.attr("y", function(d,i){
return y(d.key);
})
.attr("dy", function(d,i){
return y.range(1)/1.5+2;
})
.text(function(d){
return d.value;
})
}
plot.call(chart, {data: data});

Version De Travail 3

Pas De Version De Travail 4