javascript 변수에서 d3.js로 데이터 가져 오기

Question

tl; dr 파일 대신 다른 javascript 변수에서 직접 d3.js 데이터를 가져 오려면 어떻게해야합니까?

긴 버전 :

이 질문은 두 개의 다른 장소 here 및 here에 요청했지만 답변은 오히려 ... 부진했다, 그래서 내가 좀 더 구체적으로 질문을 거라고 생각했다.

처음으로 d3.js로 차트를 만들려고하고 있지만 아래의 외부 파일이 아닌 다른 자바 스크립트 변수 (배열)에서 데이터를로드해야합니다. 난 레일 4 애플 리케이션 안에 자바 스크립트를 사용하고 있습니다. 이미 설정 한 자바 스크립트 변수에서 직접 데이터를로드 뭔가, 이런 일에

d3.csv("sp500.csv", type, function(error, data) { 
    x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
    y.domain([0, d3.max(data.map(function(d) { return d.price; }))]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    focus.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 

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

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

    context.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area2); 

    context.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "x brush") 
     .call(brush) 
     .selectAll("rect") 
     .attr("y", -6) 
     .attr("height", height2 + 7); 
    }); 

: 내 시도

var data = []; 
    for (i = 0; i < Math.round(totaltime/interval); i++) 
    { 
     data[i] = { 
     "x": i, 
     "y": reactionratebyinterval[i] 
     }; 
    } 

그러나 모든 유지

나는이를 변환 할 내가 파일에서 가져 오지 않을 때 정확히 무엇이 바뀌 었는지 이해하고 있다고 생각하지 않기 때문에 실패했다. 내가 찾을 수있는 모든 예제는 두 가지 유형 중 하나입니다 - 중 데이터가 직접 같은 코드의 그래프에 입력 :

var lineData = [{ 
    'x': 1, 
    'y': 5 
}, { 
    'x': 20, 
    'y': 20 
}, { 
    'x': 40, 
    'y': 10 
}, { 
    'x': 60, 
    'y': 40 
}, { 
    'x': 80, 
    'y': 5 
}, { 
    'x': 100, 
    'y': 60 
}]; 

또는 그것에서 수입 내가 위에서 한 코드를 사용 어떤 종류의 파일. 하지만 다른 변수에서 가져올 필요가 있습니다. 언제든지 크기와 내용이 변경 될 수 있습니다. 내가 어떻게 그럴 수 있니?

Answer 1

d3.csv은 데이터가로드되었을 때 데이터를 채워야하는 경우에만 사용되므로이 문제를 처리하는 콜백 함수를 제공합니다.

하지만 상황에 따라 콜백이 필요하지 않습니다. 당신은해야 할 일을

통화를 d3.append 기능과 같은 데이터를 소개 :

someSVG.selectAll(".element-class") 
    .data(your_data_variable) 
    .enter() 
    .append("circle") 
    .classed("range-circle-inner", true) 
    .attr({ 
     // here: d is element in your data array 
     "cx": function(d) { 
     return d.x; 
     }, 
     "cy": op.top, 
     "r": function(d, i){ 
     return d.y; 
     }, 
     "fill": "#4499ee" 
    }); 

희망이 당신에게 도움이 :) 확실히, 나에게 감사 좋은 시작 땅을 준