D3.js 使用更新函数重新绘制图形时出错

我目前正在尝试每次移动滑块时重新绘制和更新我的图表，这会将我的数据集过滤到该年范围内。不幸的是，事情没有正常进行，我不确定我的错误在哪里

当我尝试运行代码时，出现以下错误：

Error: Invalid value for <rect> attribute y="NaN"
Error: Invalid value for <rect> attribute height="NaN"

错误：属性y=“NaN”的值无效
错误：属性height=“NaN”的值无效

我完全迷路了，非常感谢您的帮助

---

链接到我的小提琴：

你不应该这样做

request_data = data;

这一行是指全球

年

，而这一年应该是本地年

    var yearData = data.filter(function (element) { return element.YEAR == year });

应该是

    var yearData = data.filter(function (element) { return element.YEAR == sexYear });

另外，尝试

change

事件以及

input

，使其在IE中工作

d3.select("#sexYear").on("change", function () {
    update(+this.value);
});

this.value

在此未定义，因为使用全局

this

上下文调用更新

function update(sexYear) { 
    console.log(this.value);

你应该读这两行，想想他们在做什么

    var ageNames = d3.keys(yearData[0]).filter(function (key) { return key !== "CAUSE"; });
    var ageNames = d3.keys(yearData[0]).filter(function (key) { return key !== "YEAR"; });

我保证不是你想的那样

ageNames

是一个非常容易混淆的名称，例如，它应该是

seriesNames

。然后你可以像这样实现

var notSeriesNames = ['CAUSE', 'YEAR']
//...
var seriesNames = d3.keys(yearData[0]).filter(function (key) {
    return notSeriesNames.every(function (e, i, i) { return key != e })
});

最后，您需要修复UPDATE、ENTER、EXIT结构。这是一个所有东西都固定的函数

window.onload=函数（）{
console.clear（）；
var margin={顶部：10，右侧：10，底部：35，左侧：30}，
宽度=400-margin.left-margin.right，
高度=150-margin.top-margin.bottom；
var x0=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，0.1）；
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“#FD8C25”、“#99ABC4”]）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var年=1979年；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var请求_数据=d3.csv（“http://www.sfu.ca/~gdwang/Sex.csv“，函数（错误，数据）{
d3.选择（“#sexYear”）。打开（“更改”，函数（）{
更新（+此值）；
});
d3.在（“输入”，函数（）上选择（“#六年”）{
更新（+此值）；
});
更新（年）；
//更新年份
功能更新（六年）{
var notSeriesNames=['原因'，'年份'，'系列']
console.log（“更新”，六年）；
//调整年份滑块上的文本
d3.选择（“#六年值”）。文本（六年）；
d3.选择（“六年”）。属性（“价值”，六年）；
var yearData=data.filter（函数（元素）{return element.YEAR==sexYear}）；
var seriesNames=d3.keys（yearData[0]）.filter（函数（键）{
return notSeriesNames.every（函数（元素、idnex、数组）{
返回键！=元素
})
});
yearData.forEach（功能（d）{
d、 series=seriesNames.map（函数（名称）{return{name:name，value:+d[name]}；}）；
});
域（yearData.map（函数（d）{返回d.CAUSE；}））；
x1.域（序列名）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（yearData，函数（d）{返回d3.max（d.series，函数（d）{返回d.value；}；}）]）；
//事业群
//更新
var causeUpdate=svg.selectAll（“.CAUSE”）
.数据（年数据），
//输入****本机d3副作用****输入选择添加到更新选择
causeEnter=causeUpdate.enter（）.append（“g”）
.attr（“类别”、“原因”）
.attr（“transform”，函数（d）{return”translate（“+x0（d.CAUSE）+”，0）”；}），
//出口
causeExit=causeUpdate.exit（）.remove（），
//系列组
//更新
seriesUpdate=causeUpdate.selectAll（“rect”）
.数据（功能（d）{
返回d系列；
});
//输入****本机d3副作用****输入选择添加到更新选择
seriesUpdate.enter（）.append（“rect”）
//更新+输入
seriesUpdate.attr（“宽度”，x1.rangeBand（））
.样式（“填充”，功能（d）{
返回颜色（d.name）；
})
.transition（）
.attr（“x”，函数（d）{
返回x1（d.name）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
//出口
seriesUpdate.exit（）.remove（）
}
//划清界限
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（'text'）
.attr（'transform'、'rotate（-15'））
.style（'text-anchor'，'end'）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“潜在损失年”）；
d3.选择全部（“.勾选>文本”）
.style（“字体大小”，6）；
})
};
正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}

年份=…
声明请求数据时，应以分号而不是等号结束此语句。此外，更新功能应使用请求_数据。