Javascript D3十年时间刻度，数据格式为年

我是D3和JS新手，在过去的几天里，我用d3tips on.hover创建了一个（在我看来）很棒的响应图表。看起来像

问题是，我根据虚拟数据（看起来像每年的计数）创建了这个图表，并使用

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([1910, 1920, 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020]);

这很好，但我想根据我将来将要导入的数据来确定我的刻度。我希望根据数据集中提供的年份范围动态生成x轴上的刻度（当我没有提供刻度参数时，轴看起来非常混乱，数字明显重叠，无法读取）

这里有许多关于stackoverflow的相关问题，但我还没有找到任何可行的解决方案。到目前为止，我已经尝试：

.ticks(10); //To set the amount of ticks to 10, and have d3 determine which ones they should be. This changed nothing compared to not providing any tick properties.
d3.time.scale(); //This completely removed the x axis. I thought this was because my data wasn't in the correct format, but I'm not sure and I haven't found a way to fix this (I tried Date(x_data) but this didn't solve the problem).

我觉得我被困在这里了，我开始想办法解决一个简单的问题。有人有主意吗

完整的.js代码作为堆栈片段：

“严格使用”；
//希林·沃登·德马吉斯·格洛特·范赫特·瓦斯特斯泰德。
var保证金={
排名：120，
右:40,，
底数：60，
左：80
}
, 
宽度=960-margin.left-margin.right
, 
高度=500-margin.top-margin.bottom；
//Het型schaal van de x as。
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，0.1）；
//Het型schaal van de y as。
变量y=d3.scale.linear（）
.范围（[高度，0]）；
//X组件：。硬编码的moeten nog GEBASERD worden op de数据ipv。
//执行副总裁lijn tekenen boven de x as。
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
//.滴答声（10）；//不起作用。
.价值观（[1910、1920、1930、1940、1950、1960、1970、1980、1990、2000、2010、2020]）；
//是的。
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
//悬停是一个很好的例子。Tekst（hier d.Jaar&d.Aantal）在naar-de-soort图表中的位置。
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“Jaar:”+d.Jaar++“
”
“++”Aantal:“+d.Aantal+”；
});
//响应型svg
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，“50%”）
.attr（“高度”，“50%”）
.attr（'viewBox'，'0'+数学最大值（宽度，高度）+''+数学最大值（宽度，高度））
.attr（'preserveAspectRatio'，'xMinYMin'）
.附加（“g”）
.attr（“转换”、“转换”（+Math.min（宽度、高度）/10+）、“+Math.min（宽度、高度）/5+”）；
//韦兰特伍德利克的职能是“小费”。
svg.call（tip）；
//d3.tsv函数moet vervangen worden door JSON对象uit导出van GEOSERVER。
d3.tsv（”http://127.0.0.1:8080/sortdate.tsv，类型，函数（错误，数据）{
x、 域（data.map）（函数（d）{
返回字符串（d.Jaar）；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回编号（d.Aantal）；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“Aantal”）；//Tekst bij de y as。
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.Jaar）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.Aantal）；
})
.attr（“高度”，功能（d）{
返回高度-y（垂直方向）；
})
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）；
});
//特肯·德查特。
功能类型（d）{
d、 N=d.N；
返回d；
}

正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：#0D4B84；
}
.bar:悬停{
填充：#DA6A26；
}
.x轴路径{
显示：无；
}
.d3提示{
线高：1；
字体大小：粗体；
填充：12px；
背景：#FFFFFF；
颜色：#000000；
边界半径：2px；
边框样式：实心；
边框宽度：1px；
}
/*为工具提示创建一个小三角形延长线*/
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：rgba（0,0,0,0.8）；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
/*以不同方式设置向北工具提示的样式*/
第三点提示n：之后{
保证金：-1px0；
最高：100%；
左：0；
}

D3条形图
响应柱状图

出现问题的原因是您正在手动设置

tickValues（）

。如果您阅读了的文档，您将看到：

如果指定了值数组，则指定的值将用于刻度，而不是使用标尺的自动刻度生成器

因此，您需要做的是删除对

tickValues（）

的调用。比如：

var xAxis = d3.svg.axis().scale(x).orient("bottom");
d3.select("svg").append("g").call(xAxis);

---

由于您使用的是顺序刻度，因此必须给出刻度值

但是您可以使用数据动态地将tickValue限制为10个tick

var mod = Math.ceil(x.domain().length/10);
var values = [];//put the ticks in values array
x.domain().forEach(function(d, i){
  if (i%mod ==0){
    values.push(d)
  }
})
xAxis.tickValues(values);//this will have 10 ticks

---

工作代码

可能我提的问题不清楚。使用时，请勾选（10）；我确实删除了tickValues（）属性，因为这正是我试图绕过的。问题是，当我这样做时，图形看起来如下：（注意：这没有tickValues（）和.ticks（10）；如果我理解正确，理论上应该返回一个带有10个刻度的x轴。@Yoeri您能提供一个堆栈片段，我们可以运行它，这样我就可以看到您的问题了吗？我会努力解决这个问题，问题是数据被导入了，我不确定如何在片段中导入。我已将测试页面的源上传到我的dropbox中：我也会试着把它作为一个片段发布。@Yoeri-一旦你得到了数据，就运行一个

JSON.stringify（）<