D3.js基础图表出现TypeError: t.slice is not a function错误排查

我帮你定位到这个错误的核心原因了，咱们一步步拆解问题并修复：

1. 错误根源：日期处理的重复操作 #

你代码里的这一行是触发错误的关键：

data_test.forEach(function(d) {
  d.dates = parseDate(d.dates); // 这里出问题了！
  d.lines = +d.lines;
});

d.dates已经是你通过new Date(((key.split(","))[2]))创建的Date对象，但parseDate是用来解析字符串为Date对象的方法——把Date对象传给它会直接返回null。最终导致x.domain(data_test.map(function(d) { return d.dates; }))得到的数组全是无效的null，ordinal比例尺无法处理这种数据，就抛出了t.slice is not a function的错误。

2. 修复方案：统一日期解析逻辑 #

推荐两种修复方式，第二种更符合D3最佳实践，能避免浏览器日期解析的兼容性问题：

方式一：移除无效的日期重复解析 #

直接删掉d.dates = parseDate(d.dates);这一行，因为d.dates已经是有效的Date对象：

data_test.forEach(function(d) {
  // 删掉这一行：d.dates = parseDate(d.dates);
  d.lines = +d.lines;
});

方式二：用D3的parseDate统一解析日期字符串（推荐） #

不同浏览器对new Date("4/13/2018 8:40:06 AM")的解析可能有差异，建议直接用D3的时间格式化工具处理原始字符串：

• 先修改parseDate的格式定义，匹配你的日期字符串格式：

  // 原格式"%Y-%m"不匹配，改成对应"4/13/2018 8:40:06 AM"的格式
  var parseDate = d3.time.format("%m/%d/%Y %I:%M:%S %p").parse;
  

• 然后在构建list_datas时，直接用parseDate解析日期字符串，替换new Date：

  date = parseDate((key.split(","))[2]); // 替代原来的new Date(...)
  

• 这样后续的forEach里就不需要再处理d.dates了，它已经是标准的Date对象。

3. 额外的规范调整 #

我还帮你修正了一个小问题：把svg.selectAll("bar")改成svg.selectAll(".bar")，并给rect元素添加class="bar"——这样选择器更规范，避免潜在的匹配问题。

修正后的完整代码 #

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var list_datas = [];
var i=0;
var chaine="Datas list"
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

// 修改parseDate格式，匹配你的日期字符串
var parseDate = d3.time.format("%m/%d/%Y %I:%M:%S %p").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m")); // 可根据需求调整显示格式

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("testSerialisation.ujson", function(error, data) {
if (error) throw error;

function compare(x, y) {
return x.lines - y.lines;
}

console.log(data);
for (var key in data.datas) {
if (key.indexOf(chaine) != -1) {
// 用parseDate直接解析日期字符串
date = parseDate((key.split(","))[2]);
console.log(date);
line = (key.split(","))[3];
datas_line=(`${data.datas[key]}`).split(",");
list_datas[i] = {lines: line, dates: date,datas:datas_line};
i++;
}
}
data_test = list_datas.sort(compare);
console.log(data_test);

// 仅处理lines的数值类型，无需再解析dates
data_test.forEach(function(d) {
d.lines = +d.lines;
});

x.domain(data_test.map(function(d) { return d.dates; }));
y.domain([0, d3.max(data_test, function(d) { return d.lines; })]);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("lines ($)");

// 修正选择器并添加bar类
svg.selectAll(".bar")
.data(data_test)
.enter().append("rect")
.attr("class", "bar")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.dates); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.lines); })
.attr("height", function(d) { return height - y(d.lines);});
});
</script>

后续扩展多温度数据的思路 #

如果要展示多温度数据（每个日期对应多个温度值），可以参考这些方向：

• 调整数据结构，让每个数据对象包含多个温度字段，比如{dates: date, lines: line, temp1: 170, temp2: 171, ...}
• 采用分组柱状图：调整x轴的rangeBand，把每个日期的空间拆分成多个部分，为不同温度系列分配不同的x位置和颜色
• 也可以考虑堆叠柱状图，适合展示温度值的总和与细分占比

内容的提问来源于stack exchange，提问作者Patrick Michel