我正在参加D3.js的Udemy课程。
不幸的是,由于D3.js的新版本问世,因此没有关于其新语法的最新教程,所以我正在浏览他们的API维基。
话虽如此,我一直坚持如何翻译这段代码(版本3)。我正在学习序数量表
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});
到第4版。
看看他们的API Wiki,似乎摆脱 rangeBand 功能CHANGES.MD
我已经尝试过最好的翻译,但我无法弄明白它的错误:
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});
答案 0 :(得分:14)
以下是工作代码。
v4不支持scale.oridnal,因此使用了scaleBand。
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.scale.ordinal()
.domain(data.map(function(entry){
return entry.key;
}))
.rangeBands([0, height]);*/
var y = d3.scaleBand()
.domain(data.map(function(entry){
return entry.key;
}))
.rangeRound([0, height])
.padding(0.1);
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.bandwidth()-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.bandwidth()/1.5+2;
})
.text(function(d){
return d.value;
})
}
plot.call(chart, {data: data});
答案 1 :(得分:3)
请查看get_slot_names()/get_slot()。 d3.valeBand()中提供了d3.v4序数规模实现。
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 = 500;
var h = 300;
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.scaleBand()
.domain(data.map(function(entry){
return entry.key;
}))
.range([height, 0])
.padding(0.1);
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", function(d) {
// return x(d.value); })
.attr("y", function(d,i){
return y(d.key);
})
.attr("height", y.bandwidth())
.attr("width", function(d){
return x(d.value);
});
}
plot.call(chart, {data: data});

.bar { fill: steelblue; }

<script src="https://d3js.org/d3.v4.min.js"></script>
&#13;