d3 꺾은 선형 차트, 선 그리기

간단한 블록 예를 here과 모방하려고합니다. 그러나 x 및 y 축을 그리면 선의 흔적이 표시되지 않습니다. 몇 번 샅샅이 뒤졌지만 모든 것이 저울과 선에 같은 방식으로 공급되고 있다고 생각하지만 데이터를 tsv 파일이 아닌 배열을 통해 다르게로드합니다. JSBin here 비 작동 :d3 꺾은 선형 차트, 선 그리기

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<svg width="960" height="500"></svg> 

<script> 
var data = [["2014-12-31", 0.31999999999999],["2014-11-30", 2.71],["2014-10-31", -4.05],["2014-09-30", 4.22],["2014-08-31", 2.17],["2014-07-31", 5.36],["2014-06-30", 3.99],["2014-05-31", 3.52],["2014-04-30", -.46],["2014-03-31", -8.22],["2014-02-28", 5.89]] 

var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 



var parseTime = d3.timeParse("%Y-%m-%d"); 

var x = d3.scaleTime().rangeRound([0, width]); 
var y = d3.scaleLinear().rangeRound([height, 0]); 

var data = data.map(function(d){ 
    return [parseTime(d[0]), +d[1]] 
}); 
var line = d3.line() 
    .x(function(d){ 
    return d[0]; 
    }) 
    .y(function(d){ 
    return d[1]; 
    }); 

x.domain(d3.extent(data, function(d) { return d[0]; })); 
y.domain(d3.extent(data, function(d) { return d[1]; })); 

g.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .select(".domain") 
    .remove(); 

g.append("g") 
    .call(d3.axisLeft(y)) 
    .append("text") 
    .attr("fill", "#000") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 50) 
    .attr("dy", "0.9em") 
    .attr("text-anchor", "end") 
    .text("Price ($)"); 

g.append("path") 
    .datum(data) 
    .attr("fill", "none") 
    .attr("stroke", "steelblue") 
    .attr("stroke-linejoin", "round") 
    .attr("stroke-linecap", "round") 
    .attr("stroke-width", 3) 
    .attr("d", line); 
</script> 

</body> 
</html>

것도 분명 내가 잘못인가?

var line = d3.line() 
    .x(function(d){ 
    return d[0]; 
    }) 
    .y(function(d){ 
    return d[1]; 
    });

코드의이 섹션에서는 데이터의 플롯 좌표를 설정하고, 현재 데이터 값을 사용하고 있습니다 :

출처

2017-02-05 Tim Lindsey

문제는 당신이 당신의 데이터를 조정하여 SVG 내에서 적절히 공간에 맞게 확장되지 않는 것입니다 크기 조정없이 x 및 y svg 값으로. 규모에 따라 비율을 조정해야합니다.

var line = d3.line() 
    .x(function(d){ 
    console.log(x(d[0])); return x(d[0]); 
    }) 
    .y(function(d){ 
    return y(d[1]); 
    });

이렇게하면 그래프가 의도 한대로 그려지도록 할 수 있습니다.

출처

2017-02-05 06:57:54

d3 꺾은 선형 차트, 선 그리기

답변

관련 문제