Javascript 使用外部数据的D3条形图

我使用d3.js v4制作了一个条形图，我试图使用外部数据文件（.tsv）文件，它给出了以下错误：错误：属性高度：预期长度，“NaN”。（匿名）@d3.min.js:2 o@d3.min.js:2 yn@d3.min.js:2 mn@d3.min.js:2 d3.min.js:2错误：属性y:预期长度，“NaN”

这是我的密码：

var bardata=[]；
d3.tsv（'data.tsv'，函数（数据）{
用于（输入数据）{
bardata.push（数据[key].value）
}
var margin={顶部：30，右侧：30，底部：40，左侧：50}
变量高度=400-margin.top-margin.bottom，
宽度=400-margin.left-margin.right，
杆宽=50，
气压偏移=5；
颜色；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
var xScale=d3.scaleBand（）
.域（d3.范围（0，数据长度））
.填充（0.1）
.范围（[0，宽度]）；
var tooltip=d3。选择（'body'）。追加（'div'））
.style（'位置'，'绝对'）
.style（'padding'，'0 10px'）
.style（'背景'，'白色'）
.style（'opacity'，0）
var myChart=d3.select（“#chart”）.append（'svg'））
.style（'background'，'#E7E0CB'）
.attr（'width'，width+margin.right+margin.left）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
.style（'background'，'#C9D7D6'）
.selectAll（'rect'）。数据（bardata）
.enter（）.append（'rect'）
.style（'fill'，'#C61C6F'）
.attr（'width'，xScale.bandwidth（））
.attr（'x'，函数（d，i）{
返回xScale（i）；
})
.attr（'height'，0）
.attr（'y'，高度）
.on（'mouseover'，函数（d）{
d3.选择（本）
.style（“不透明度”，0.5）
})
.on（'mouseleave'，函数（d）{
d3.选择（本）
.style（'opacity'，1）
})
.on（'mouseover'，函数（d）{
tooltip.transition（）
.style（'opacity'，0.9）
html（d）
.style（'left'，（d3.event.pageX-35）+'px'）
.style（'top'，（d3.event.pageY-30）+'px'）
tempColor=this.style.fill；
d3.选择（本）
.style（“不透明度”，0.5）
.style（'填充'，'黄色'）
})
.on（'mouseleave'，函数（d）{
tempColor=this.style.fill；
d3.选择（本）
.style（'opacity'，1）
.style（'fill'，'#C61C6F'）
})
myChart.transition（）
.attr（高度），功能（d）{
返回yScale（d）；
})
.attr（'y'，函数（d）{
返回高度——yScale（d）；
})
.延迟（功能（d，i）{
返回i*20；
})
.持续时间（1000）
.轻松（d3.轻松弹性）
var vGuideScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
VarVaxis=d3.axisLeft（vGuideScale）。刻度（10）
var vGuide=d3.select（'svg'）.append（'g'））
动词（vGuide）
vGuide.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
var hAxis=d3.axisBottom（xScale）.tickValues（xScale.domain（）.filter）（函数（d，i）{
返回！（i%（数据长度/5））
}))
var hGuide=d3.select（'svg'）.append（'g'））
哈克斯（hGuide）
hGuide.attr（'transform'，'translate（'+margin.left++'，'+（height+margin.top）+'））
});

折线图
条形图
问题在于：

var myChart = d3.select('#chart').append('svg')
    .style('background', '#E7E0CB')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    .style('background', '#C9D7D6')
    .selectAll('rect').data(bardata)
    .enter().append('rect')
    .style('fill', '#C61C6F')
    .attr('width', xScale.bandwidth())

在单个变量中，您是：

附加SVG
附加组
创建输入选择
附加矩形
相反，让我们打破这个变量：

var myChart = d3.select('body').append('svg')
    .style('background', '#E7E0CB')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    .style('background', '#C9D7D6');

var rects = myChart.selectAll('rect').data(bardata)
    .enter().append('rect')
    .style('fill', '#C61C6F')
    .attr('width', xScale.bandwidth())
    .attr('x', function(d, i) {
        return xScale(i);
    })
    .attr('height', 0)
    .attr('y', height)

然后，单独调用
rects
上的转换

除此之外，请注意
columns
属性，它是由
d3.tsv
自动创建的：

for (key in data) {
    if (key != "columns") bardata.push(data[key].value)
}

这是您的工作代码：


var bardata=[]；
var data=d3.tsvParse（d3.select（“#tsv”）.text（））；
用于（输入数据）{
if（key！=“columns”）bardata.push（data[key].value）
}
var保证金={
前30名，
右:30,，
底数：40，
左：50
}
变量高度=400-margin.top-margin.bottom，
宽度=400-margin.left-margin.right，
杆宽=50，
气压偏移=5；
颜色；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
var xScale=d3.scaleBand（）
.域（d3.范围（0，数据长度））
.填充（0.1）
.范围（[0，宽度]）；
var tooltip=d3。选择（'body'）。追加（'div'））
.style（'位置'，'绝对'）
.style（'padding'，'0 10px'）
.style（'背景'，'白色'）
.style（'opacity'，0）
var myChart=d3。选择（'body'）。追加（'svg'））
.style（'background'，'#E7E0CB'）
.attr（'width'，width+margin.right+margin.left）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
.style（'background'，'#C9D7D6'）；
var rects=myChart.selectAll（'rect'）。数据（bardata）
.enter（）.append（'rect'）
.style（'fill'，'#C61C6F'）
.attr（'width'，xScale.bandwidth（））
.attr（'x'，函数（d，i）{
返回xScale（i）；
})
.attr（'height'，0）
.attr（'y'，高度）
.on（'mouseover'，函数（d）{
d3.选择（本）
.style（“不透明度”，0.5）
})
.on（'mouseleave'，函数（d）{
d3.选择（本）
.style（'opacity'，1）
})
.on（'mouseover'，函数（d）{
tooltip.transition（）
.style（'opacity'，0.9）
html（d）
.style（'left'，（d3.event.pageX-35）+'px'）
.style（'top'，（d3.event.pageY-30）+'px'）
tempColor=this.style.fill；
d3.选择（本）
.style（“不透明度”，0.5）
.style（'填充'，'黄色'）
})
.on（'mouseleave'，函数（d）{
tempColor=this.style.fill；
d3.选择（本）
.style（'opacity'，1）
.style（'fill'，'#C61C6F'）
})
rects.transition（）
.attr（高度），功能（d）{
返回yScale（d）；
})
.attr（'y'，函数（d）{
返回高度——yScale（d）；
})
.延迟（功能（d，i）{
返回i*20；
})
.持续时间（1000）
.轻松（d3.轻松弹性）
var vGuideScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
VarVaxis=d3.axisLeft（vGuideScale）。刻度（10）
var vGuide=d3.select（'svg'）.append（'g'））
动词（vGuide）
vGuide.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
var hAxis=d3.axisBottom（xScale）.tickValues（xScale.domain（）.filter（funct