Javascript D3.js——序数刻度（第3版到第4版）

我正在学习D3.js的Udemy课程

不幸的是，由于新版本D3.js问世，没有任何关于其新语法的最新教程，因此我浏览了一下他们的API的wiki

也就是说，我一直在研究如何翻译这段代码（版本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，似乎可以使用getridrangeBand函数

我已经尽力翻译了，但我不知道是什么错：

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});

---

下面是工作代码

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});

请看一看。d3.v4顺序刻度实现在d3.scaleBand（）中可用。

var数据=[
{键：“glassed”，值：132}，
{键：“果冻”，值：71}，
{键：“孔”，值：337}，
{key:“springs”，值：93}，
{键：“面包屑”，值：78}，
{键：“巧克力”，值：43}，
{键：“椰子”，值：20}，
{键：“奶油”，值：16}，
{键：“Cruller”，值：30}，
{键：“爱克莱尔”，值：8}，
{键：“熔块”，值：17}，
{键：“熊爪”，值：21}
];
var w=500；
var h=300；
var保证金={
前20名，
底数：20，
左:20,，
右：20
};
变量宽度=w-margin.left-margin.right；
var高度=h-margin.top-margin.bottom；
var x=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d值；
})])
.范围（[0，宽度]）；
变量y=d3.scaleBand（）
.domain（data.map）（函数（条目）{
返回entry.key；
}))
.范围（[高度，0]）
.填充（0.1）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“id”、“图表”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var chart=svg.append（“g”）
.classed（“显示”，真）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
功能图（参数）{
此选项。选择全部（“.bar”）
.数据（参数数据）
.输入（）
.append（“rect”）
.classed（“bar”，真）
//.attr（“x”，函数（d）{
//返回x（d.value）；}）
.attr（“y”，函数（d，i）{
返回y（d键）；
})
.attr（“高度”，y.带宽（））
.attr（“宽度”，函数（d）{
返回x（d值）；
});
}
调用（图表，{data:data}）
.bar{fill:steelblue；}
我可以知道这个答案的问题吗？我也不知道为什么你会被否决。除了缺少文本属性外，它看起来还有效。我不知道为什么你会被否决，但这似乎是正确的答案。我将所有的改变都标记为高亮，可能会添加一些注释和解释。这个答案很差，因为我不知道你做了什么。