d3.js의 동적 목록 데이터 사용

Question

C# 웹 메서드에서 데이터를 목록 형식으로 검색했습니다. D3 JavaScript 라이브러리를 사용하여 선형 차트 형식으로 데이터를 채워야합니다. 내가 어떻게 할 수 있니?

D3의 목록 데이터를 어떻게 사용하고 하나의 목록에 날짜 형식과 다른 목록의 값을 갖습니까?

$.ajax({ 
url: "ServiceMessage.asmx/GetPostings", 
     type: "POST", 
     contentType:"application/json", 
     success: function (data) { 
      var myData = data.d; 
      var data1; 
      var data2; 
      alert(myData.length + " hellos"); 
      for (var i = 0; i < myData.length; i++) { 
       // $("#divMsg").append(myData[i].date + " " + myData[i].values); 
       data1[i] = myData[i].date; "</br>" 
        data2[i] = myData[i].values; "</br>" 
       $("#divMsg").append(data1[i]+""+data2[i]) 
      } 

어떻게 데이터 1 데이터 2를 사용하여 선 그래프를 채울 수 있습니까?

Answer 1

당신은 이미 목록에있는 데이터를 가지고 있기 때문에 http://www.d3noob.org/2012/12/starting-with-basic-d3-line-graph.html

귀하의 경우에도 간단 여기에 모습을 가질 수 있습니다. 두 개의 배열로 나누지 마십시오. [{date : ..., value : ...}, {date : ..., value : ...} ...] 하나의 목록을 갖는 것이 좋습니다.

init d3 (x 축에 "시간"범위가 있음을 알 수 있듯이이를 사용하는 경우 d3.time.format ("% d- % b- % y") .parse 함수) : 다음

var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
width = 600 - margin.left - margin.right, 
height = 270 - margin.top - margin.bottom; 

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

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

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

/* ---------------------- This is your line --------------------- */ 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 
/* -------------------------------------------------------------- */ 

var svg = d3.select("body") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

과 데이터의 목록을 광고 (추가 {날짜 ...를 값 ...}

svg.append("path")  // Add the valueline path. 
    .attr("d", valueline(data)); 

svg.append("g")   // Add the X Axis 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g")   // Add the Y Axis 
    .attr("class", "y axis") 
    .call(yAxis); 

PS : I 사용 여기에 "가치"가 있지만 질문에서 "가치"를 사용하십시오.