Javascript 简单D3线形图未加载数据

我一直在尝试在D3中创建一个非常简单的折线图。数据是从单个数组中检索的，没有什么特别之处，但是，无论我多么努力，数据都不会加载到图表中。我已经修改了这么多次代码，似乎没有解决办法。请记住，我是JS和D3的新手

<script>

var h = 400;
var w = 600;
var margin = 20;
var datac = [68, 1887, 1531, 645, 3870, 2759, 3064, 2188, 1451, 3336, 386, 883];



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

var svg = d3.select("body")
        .append("svg")
        .attr("height", h)
        .attr("width", w)
    .append("g");

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

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d; })])
.range([0 + margin, h - margin]);

var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .range([0 + margin, w - margin]);

var xAxis = d3.svg.axis()
            .scale(xScale)
           .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

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

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin+ ",0)")
.call(yAxis);


</script>

var h=400；
var w=600；
var保证金=20；
var datac=[681887153164537027593064121881451336386883]；
var line=d3.svg.line（）
.x（函数（d，i）{返回x（i）；}）
.y（函数（d）{返回y（d）；}）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“高度”，h）
.attr（“宽度”，w）
.附加（“g”）；
追加（“路径”）
.数据（datac）
.attr（“类”、“行”）
.attr（“d”，行）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d；}）]）
.范围（[0+裕度，h-裕度]）；
var xScale=d3.scale.ordinal（）
.domain（d3.range（dataset.length））
.范围（[0+保证金，w-保证金]）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“平移（0）”+（h-边距）+“）”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（“+margin+”，0）”）
.呼叫（yAxis）；

将您的代码更新如下：

var h = 400;
var w = 600;
var margin = 50;
var datac = [68, 1887, 1531, 645, 3870, 2759, 3064, 2188, 1451, 3336, 386, 883];

var svg = d3.select("body")
        .append("svg")
        .attr("height", h)
        .attr("width", w)
        .attr("transform", "translate("+margin+","+margin+")")
        .append("g"); 

var y = d3.scale.linear()
    .domain([0, d3.max(datac)])
    .range([0 + margin, h - margin]);

var x = d3.scale.linear()
        .domain([0,datac.length])
        .range([0 + margin, w - margin]);

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

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

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

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

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis);

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