Javascript 错误：<；rect>；属性宽度：预期长度；“南”；。未捕获类型错误：无法读取属性'；长度'；未定义的

我已经摆弄这几天了，我要么得到标题中的错误，要么得到“key.call不是函数”，我不知道为什么。。。基本上，脚本的要点是根据下拉列表中的选择加载不同的csv文件。如果没有所有的下拉内容，脚本工作得很好，但是一旦我介绍了下拉脚本，它就开始出错，我不知道为什么。下面是脚本，如果有帮助的话，我将附上一个我正在使用的csv的示例

提前谢谢你

CSV示例：（QC=本示例中的QuantityCharged）

A码
麻醉
C码
临床成分（NRV）
电子编码
新兴技术
评价与管理
G码
J码
L-码
药
病理学与实验室
P-码
Q码
放射科
外科
V码
var svg=d3。选择（“svg”），
边距={顶部：10，右侧：720，底部：5，左侧：720}，
宽度=+svg.attr（“宽度”）+margin.left+margin.right，
高度=+svg.attr（“高度”）+margin.top+margin.bottom；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scale.linear（）
.范围（[3，宽度]）；
变量y=d3.scale.ordinal（）
.范围（[高度，1]）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度）；
var parseRow=函数（行）{
返回{
子类别：行。子类别，
quantityCharged:parseFloat（行。quantityCharged）
}
};
//d3
var loadData=函数（数据）{
var metric=document.getElementById（'metric'）。选择选项[0]。文本；
var dataFile='data/'+metric+'.csv'
d3.csv（数据文件、parseRow、函数（错误、数据）{
x、 域（[1，d3.max（数据，函数（d）{返回d.QuantityCharged；}）]）；
y、 域（[1，d3.max（数据，函数（d）{返回d.Charge；}）]）
});
图表。属性（“高度”，高度）；
变量条=图表。选择全部（“g”）
.数据（“宽度”，数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*height+”）；}）；
附加条（“rect”）
.attr（“宽度”，函数（d）{返回x（d.QuantityCharged）；}）
.attr（“高度”，高度-1）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d.QuantityCharged）+10；}）
.attr（“y”，高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.QuantityCharged+“--”+d.Charge；}）；
var xAxis=d3.svg.axis（）
.比例（x）
.滴答声（20）
.东方（“顶部”）
var yAxis=d3.svg.axis（）
.比例（y）
.滴答声（24）
.东方（“左”）；
var line=d3.svg.line（）
.x（函数（d）{返回x（d.QuantityCharged）；}）
.y（函数（d）{返回y（d.QuantityCharged）；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
追加（“路径”）
.attr（“类”、“行”）
.attr（“数据”，行）；
功能类型（d）{
d、 QuantityCharged=+d.QuantityCharged；//强制使用数字
d、 子类别=d.子类别；
返回d；
}};
功能子类别（csv）{
文本（数据文件、解析行、函数（文本）{
var Subcategory=d3.csv.parseRows（文本），
Charge=d3.csv.parseRows（文本）；
})}
loadData（）；

<svg class="chart"></svg>
<select onchange="loadData()" id="metric">
    <option>A-codes</option>
    <option>Anesthesia</option>
    <option>C-codes</option>
    <option>Clinical Components (NRV)</option>
    <option>E-Codes</option>
    <option>Emerging Technology</option>
    <option>Evaluation & Management</option>
    <option>G-codes</option>
    <option>J-codes</option>
    <option>L-codes</option>
    <option>Medicine</option>
    <option>Pathology & Laboratory</option>
    <option>P-codes</option>
    <option>Q-codes</option>
    <option>Radiology</option>
    <option>Surgery</option>
    <option>V-codes</option>
</select>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script>



var svg = d3.select("svg"),
    margin = {top:10, right: 720, bottom: 5, left: 720},
    width = +svg.attr("width") + margin.left + margin.right,
    height = +svg.attr("height") + margin.top + margin.bottom;

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
    .range([3, width]);

var y = d3.scale.ordinal()
    .range([height, 1]);

var chart = d3.select(".chart")
    .attr("width", width);

var parseRow = function(row) {
    return {
        subcategory: row.Subcategory,
        quantityCharged: parseFloat(row.QuantityCharged)
    }
};

//d3
var loadData = function(data) {
    var metric = document.getElementById('metric').selectedOptions[0].text;
    var dataFile = 'data/' + metric + '.csv'
d3.csv(dataFile, parseRow, function(error, data) {
    x.domain([1, d3.max(data, function(d) { return d.QuantityCharged; })]);
    y.domain([1, d3.max(data, function(d) { return d.Charge; })])
});


    chart.attr("height", height);



    var bar = chart.selectAll("g")
        .data("width", data)
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * height + ")"; });



    bar.append("rect")
        .attr("width", function(d) { return x(d.QuantityCharged); })
        .attr("height", height - 1);

    bar.append("text")
        .attr("x", function(d) { return x(d.QuantityCharged) + 10; })
        .attr("y", height / 2)
        .attr("dy", ".35em")
        .text(function(d) { return d.QuantityCharged + " -- " + d.Charge; });

    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(20)
        .orient("top")

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

    var line = d3.svg.line()
        .x(function(d) { return x(d.QuantityCharged); })
        .y(function(d) { return y(d.QuantityCharged); });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    svg.append("path")
        .attr("class", "line")
        .attr("data", line);



function type(d) {
    d.QuantityCharged = +d.QuantityCharged; // coerce to number
    d.Subcategory = d.Subcategory;
    return d;
}};


function Subcategory(csv) {
    d3.text(dataFile, parseRow, function(text) {
    var Subcategory = d3.csv.parseRows(text),
    Charge = d3.csv.parseRows(text);

        })}

loadData();

</script>