простой D3 linechart не загружает данные

Question

Я пытаюсь создать чрезвычайно простую линейную диаграмму в 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> 

Answer 1

Обновленный ваш код так:

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)); 

Fiddle here.