Javascript d3.js：有序量表

我正在绘制折线图，但无法计算x轴的比例。我使用顺序比例，因为我在x轴上显示类别。这是缩放代码。请让我知道我做错了什么

var xScale = d3.scale.ordinal()
       .domain(xExtents)
       .range([padding, w - padding * 2]);

下面是示例代码，很抱歉将所有javascript和HTML放在一个地方

.轴线路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
.y1{
填充物：白色；
笔画：橙色；
笔划宽度：1.5px；
}
.y2{
填充物：白色；
笔画：红色；
笔划宽度：1.5px；
}
.y3{
填充物：白色；
笔画：钢蓝；
笔划宽度：1.5px；
}
.线路{
填充：无；
笔划宽度：1.5px；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：50px；
高度：10px；
填充物：5px；
字体：10px无衬线；
背景：白烟；
边框：实心1px#aaa；
指针事件：无；
盒影：2px 2px 1px#888；
}
.传奇{
填充物：5px；
字体：10px无衬线；
背景：黄色；
盒影：2px 2px 1px#888；
}
.头衔{
字体：13px无衬线；
}
//宽度和高度
var w=500；
var h=300；
var=50；
变量数据集=[
[ 
{x:“美国”，y:0}，
{x:“英国”，y:0}，
{x:“巴西”，y:2}，
{x:“科里亚”，y:0}，
{x:“日本”，y:0}，
{x:“中国”，y:0}
],
[
{x:“美国”，y:3}，
{x:“英国”，y:4}，
{x:“巴西”，y:1}，
{x:“科里亚”，y:3}，
{x:“日本”，y:1}，
{x:“中国”，y:2}
],
[
{x:“美国”，y:2}，
{x:“英国”，y:0}，
{x:“巴西”，y:2}，
{x:“科里亚”，y:3}，
{x:“日本”，y:4}，
{x:“中国”，y:1}
]
];
var color_hash={0:[“苹果”，“绿色”]，
1:[“芒果”、“橘子”]，
2:[“樱桃”、“红色”]
}                      
//定义轴范围和比例
var yExtents=d3.extent（d3.merge（dataset），函数（d）{returnd.y；}）；
var xExtents=d3.extent（d3.merge（dataset），函数（d）{returnd.x；}）；
var xScale=d3.scale.ordinal（）
.domain（xExtents）
.范围（[填充，w-填充*2]）；
var yScale=d3.scale.linear（）
.domain（[0，yExtents[1]]）
.范围（[h-填充，填充]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//定义行
var line=d3.svg.line（）
.x（函数（d）{返回x（d.x）；}）
.y（函数（d）{返回y（d.y1，d.y2，d.y3）；}）；
var pathContainers=svg.selectAll（'g.line'）
.数据（数据集）；
pathContainers.enter（）.append（'g'））
.attr（'类'，'行'）
.attr（“风格”，功能（d）{
返回“stroke:+color_hash[dataset.indexOf（d）][1]；
});
pathContainers.selectAll（'path'）
.data（函数（d）{return[d]；}）//从pathContainer继续数据
.enter（）.append（'path'）
.attr（'d'，d3.svg.line（）
.x（函数（d）{返回xScale（d.x）；}）
.y（函数（d）{返回yScale（d.y）；}）
);
//添加圆圈
pathContainers.selectAll（'circle'）
.data（函数（d）{return d；}）
.enter（）.append（'圆'）
.attr（'cx'，函数（d）{return xScale（d.x）；}）
.attr（'cy'，函数（d）{return yScale（d.y）；}）
.attr（'r'，3）；
//定义X轴
var xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.蜱（5）；
//定义Y轴
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（5）；
//添加X轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（h-填充）+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding+”，0）”）
.呼叫（yAxis）；
//添加标题
append（“svg:text”）
.attr（“类别”、“头衔”）
.attr（“x”，20）
.attr（“y”，20）
.text（“每小时销售的水果”）；
//添加图例
var legend=svg.append（“g”）
.attr（“类”、“图例”）
.attr（“x”，w-65）
.attr（“y”，25）
.attr（“高度”，100）
.attr（“宽度”，100）；
图例。选择全部（'g'）。数据（数据集）
.输入（）
.append（'g'）
.每个（功能（d，i）{
var g=d3。选择（本）；
g、 附加（“rect”）
.attr（“x”，w-65）
.attr（“y”，i*25）
.attr（“宽度”，10）
.attr（“高度”，10）
.style（“fill”，color_hash[String（i）][1]）；
g、 附加（“文本”）
.attr（“x”，w-50）
.attr（“y”，i*25+8）
.attr（“高度”，30）
.attr（“宽度”，100）
.style（“填充”，颜色_散列[String（i）][1]）
.text（颜色散列[String（i）][0]）；
});

如果要在x轴上显示不同的类别（在您的情况下，有五个国家/地区有相应的数据），则x刻度设置应使用

范围带

或

范围带

，用于顺序数据。（参见api官方文件中的

ordinal.rangeBands

和

ordinal.rangeRoundBands

）

范围

通常与线性类型的数据一起使用。希望这有帮助。

第一个问题：

var xScale = d3.scale.ordinal()
       .domain(countries)
       .rangeBands([padding, w - padding * 2], 1);//with ordinals we give range bands

使用此

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

而不是这个

http://mbostock.github.com/d3/d3.js

第二个问题：

d3.extent(d3.merge(dataset), function (d) { return d.x; }

将返回

[“巴西”、“美国”]

你需要所有独特的国家

var countries = d3.merge(dataset).map(function(d){return d.x});
countries = d3.set(countries).values();//unique countries


var xScale = d3.scale.ordinal()
       .domain(countries)
       .rangeBands([padding, w - padding * 2], 1);

这将返回

[“美国”、“英国”、“巴西”、“韩国”、“日本”、“中国”]

最后一个问题：

var xScale = d3.scale.ordinal()
       .domain(countries)
       .rangeBands([padding, w - padding * 2], 1);//with ordinals we give range bands

工作代码

希望t