데이터 파일 D3 오류

계산에 대한 학위를 끝내기위한 프로젝트를 진행하고 있으며 D3에 문제가 있습니다. 기본적으로 데이터에 코드를 직접 전달하면 작동하지만 파일에있는 데이터는 그것은 "n은 존재하지 않는다"고 말한다. 나는 왜 이런 일이 일어나는지 모르겠다. 내 코드는 다음과 같다.데이터 파일 D3 오류

PD : 누구나 내 데이터 파일 샘플이 필요하면 그냥 물어봐도된다. 사전에

감사합니다!

<code> 
<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>Causa básica</title> 
<style> 
.axis path, .axis line 
     { 
      fill: none; 
      stroke: #777; 
      shape-rendering: crispEdges; 
     } 

     .axis text 
     { 
      font-family: 'Arial'; 
      font-size: 13px; 
     } 
     .tick 
     { 
      stroke-dasharray: 1, 2; 
     } 
     .bar 
     { 
      fill: FireBrick; 
     } 
</style> 
<svg id="visualisation" width="1000" height="500"></svg> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

<script> 
InitChart(); 

function InitChart() { 
/* 
    var lineData = [{ //don't know if this is needed in source: <script src="http://d3js.org/d3.csv.js"> 
    'x': 1, //, This is the sample data 
    'y': 1.0807955e-01 
    }, { 
    'x': 2, 
    'y': 1.2815365e-01 
    }, { 
    'x': 3, 
    'y': 9.3269178e-02 
    }, { 
    'x': 4, 
    'y': 9.3894191e-02 
    }];*/ 

var lineData; 
     d3.tsv("data.tsv", function(data) { 
     lineData=data //my data, that doesn't work 
     }); 

    var vis = d3.select("#visualisation"), 
    WIDTH = 1000, 
    HEIGHT = 500, 
    MARGINS = { 
     top: 20, 
     right: 20, 
     bottom: 20, 
     left: 50 
    }, 
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) { 
     return d.x; 
     }), 
     d3.max(lineData, function (d) { 
     return d.x; 
     }) 
    ]), 
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) { 
     return d.y; 
     }), 
     d3.max(lineData, function (d) { 
     return d.y; 
     }) 
    ]), 

    xAxis = d3.svg.axis() 
     .scale(xRange) 
     .tickSize(5) 
     .tickSubdivide(true), 

    yAxis = d3.svg.axis() 
     .scale(yRange) 
     .tickSize(5) 
     .orient("left") 
     .tickSubdivide(true); 


    vis.append("svg:g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
    .call(xAxis); 

    vis.append("svg:g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis); 

    var lineFunc = d3.svg.line() 
    .x(function (d) { 
    return xRange(d.x); 
    }) 
    .y(function (d) { 
    return yRange(d.y); 
    }) 
    .interpolate('basis'); 

vis.append("svg:path") 
    .attr("d", lineFunc(lineData)) 
    .attr("stroke", "blue") 
    .attr("stroke-width", 2) 
    .attr("fill", "none"); 

} 

</script> 
</code>

출처

2015-01-30 Amnor

비동기 문제.

d3.tsv("data.tsv", function(data) { 
     lineData=data //my data, that doesn't work 
    });

기능은 나머지 코드의 실행 이후에 호출된다.

lineData=data; 이후에 함수 내의 모든 코드를 이동할 수 있습니다. 또는 함수를 빌드하십시오 :

var lineData; 
d3.tsv("data.tsv", function(data) { 
    seeData(data); 
}); 
function seeData(lineData) { 
    var vis = d3.select("#visualisation"), 
    WIDTH = 1000, 
    HEIGHT = 500, 
    MARGINS = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 50 
    }, 
    // etc etc 
}

출처

2015-01-30 08:58:41

좋아요, 이제 작동 중입니다. 함수에서 내 도메인에 새로운 문제가 있습니다. 해결할 수 있도록 노력하겠습니다. 가능하지 않으면 수정하겠습니다. 새로운 상황에 대해 의견을 말하십시오. 감사합니다. – Amnor

그냥 내 눈금 문제를 해결할 수 없으므로 이제는 한 눈금 만 표시되고 일부 정보는 손실됩니다. 내 도메인 코드와 내 데이터는 다음과 같습니다. yRange = d3.scale.linear(). range ([ MARGINS.bottom, MARGINS.top - HEIGHT]) 도메인 ([d3.min (lineData 함수 (d) { 복귀 DY; })를 FILE 'X'IN, 가 // DATA : 1, //. 1.0807955e-01 }, { 'X': 2 'Y'1.2815365e-01 }, { 'X',이 샘플 데이터 'Y'인 3 'Y' : 9.3269178e-02 }, { 'x': 4, 'y': 9.3894191e-02 'x': 5, 'y :'8.8194589e-02 ]]; * / – Amnor

답변

관련 문제