D3 - 막대 그래프

용 저울을 사용하여 파일에서로드 XML 데이터, 여기 D3에 저울을 사용하여이 장에서 막대 차트를 소개 http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart D3 - 막대 그래프

를이 위대한 자습서를 다음과 같은거야. 이제 xml 파일에서 데이터를로드하고 싶지만 코드가 작동하지 않습니다. 나는 엑스 스케일과 yScale 변수를 만드는 나는 데이터 세트 여기

의 길이를 얻을하지 않는 것이 xml 파일

<data> 
<value>5</value> 
<value>10</value> 
<value>53</value> 
<value>19</value> 
<value>61</value> 
<value>25</value> 
<value>22</value> 
<value>18</value> 
<value>15</value> 
<value>13</value> 
<value>11</value> 
<value>12</value> 
<value>15</value> 
<value>20</value> 
<value>18</value> 
<value>17</value> 
<value>16</value> 
<value>18</value> 
<value>23</value> 
<value>25</value> 
</data>

그리고 코드 자체

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Vjezba - 9.poglavlje - barchart</title> 
    <script type="text/javascript" src="d3/d3.v3.js"></script> 
    <style type="text/css"> 
     /* No style rules here yet */  
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
    d3.xml("values.xml","application/xml", function(dataset) { 

     var w = 600; 
     var h = 250; 

     //var dataset = [ 5, 10, 53, 19, 61, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 
     //radi jednakog razmaka stupova    

     var xScale = d3.scale.ordinal() 
         .domain(d3.range(dataset.length)) 
         .rangeRoundBands([0, w], 0.05); 

     var yScale = d3.scale.linear() 
         .domain([0, d3.max(dataset)]) 
         .range([0, h]); 

     //Create SVG element 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     //Create bars  
     svg.selectAll("rect") 
      .data(dataset.documentElement.getElementsByTagName("value")) 
      .enter() 
      .append("rect") 
      .attr("x", function(d, i) { 
       return xScale(i); 
      }) 
      .attr("y", function(d) { 
       return h - yScale(d); 
      }) 
      .attr("width", xScale.rangeBand()) 
      .attr("height", function(d) { 
       return yScale(d); 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 0, " + (d * 10) + ")"; 
      }); 

    }); 
    /* 
     //Create labels 
     svg.selectAll("text") 
      .data(xml.documentElement.getElementsByTagName("value")) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       return d; 
      }) 
      .attr("text-anchor", "middle") 
      .attr("x", function(d, i) { 
       return xScale(i) + xScale.rangeBand()/2; 
      }) 
      .attr("y", function(d) { 
       return h - yScale(d) + 14; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "white"); 
    */   
    </script> 
</body>

입니다 같은데요

출처

2014-02-25 user3294495

XML 대신 JSON을 사용하는 것이 좋습니다. XML은 구문 분석되어 문서로 반환되며, 이로 인해 문제가 될 수 있습니다. –

감사합니다. 저는 json 파일을 사용했습니다. 왜 아무 것도 보이지 않는 이유를 이해할 수 없습니다. 여기에 json 파일이 있습니다. http://pastebin.com/y5dviCDW 코드 : http://pastebin.com/ZJtjqe4E – user3294495

간단한 실수. "d"대신 "d.value"를 사용해야합니다. 샘플 데이터는 숫자 배열 일 뿐이지 만 JSON 데이터는 "value"속성이있는 객체의 배열입니다.

http://jsfiddle.net/5edkw/1/

내가 jsfiddle 링크를 게시하는 코드가 필요하기 때문에 ... 여기 당신이 이미 알고있는 스 니펫의 :

귀하의 예를 보려면이 시도

.attr("height", function(d) { 
    return yScale(d.value); 
})

은 "/ 0/"버전은 pastebin에 게시 한 원본입니다.

출처

2014-02-26 00:45:50 Glenn

아, 정말 고마워요! 그것은 작동합니다! :디 – user3294495

D3 - 막대 그래프

답변

관련 문제