D3을 사용하여 복잡한 데이터 세트로 유연한 막 대형 차트 만들기

Question

D3을 처음 사용했습니다. 얼마나 많은 막대가 만들어 지더라도 너비와 높이의 크기로 채워지는 유연한 차트를 만드는이 훌륭한 자습서를 따르고 있습니다. ('새로운 차트'). http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_new_chart

내 데이터를 사용하는 데 문제가 있습니다. ,

 var w = 500; 
     var h = 100; 
     var barPadding = 1; 

     var data = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
         11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

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

     svg.selectAll("rect") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("x", function(d, i) { 
       return i * (w/data.length); 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4); 
      }) 
      .attr("width", w/data.length - barPadding) 
      .attr("height", function(d) { 
       return d * 4; 
      }); 

내가 내이 작동하지 않는 생각 튜토리얼 코드의 data.length입니다 부품 함께 할 수있는 뭔가가 있습니다 : 이것은 매우 간단한 데이터 세트와 막대 차트를 만들 수있는 튜토리얼 코드

 .attr("x", function(d, i) {return i * (w/data.length); 

을

또는 내 데이터에서 '시간'을 요청하는 방식 일 수 있습니다. 이건 내 코드입니다 :

<div id="chart"> 
    <svg width="800" height="600"><g class="group"></g> 
    </svg> 
    </div> 

    var w = 500; 
    var h = 100; 
    var barPadding = 1; 

    var data = [ 
    {"name": "The Kings speech", "time": 118}, 
    {"name": "Slumdog Millionaire", "time": 120}, 
    {"name": "Shakespeare in Love", "time": 122}, 
    {"name": "Chariots of Fire", "time": 123}, 
    ] 

    d3.select('svg g.group') 
    .selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
    .attr('x', function(d, i) {return i * (w/data.length)}) 
    .attr('y', function(d) {return h - d['time'];}) 
    .attr('width', w/data.length - barPadding) 
    .attr('height', function(d) {return d['time'];}) 

나는 이것이 당신의 많은 간단한 것 알지만, 나는이에 너무 오래 썼다 및이를 통해 저를 점점 큰 도움이 될 것입니다! 감사합니다

Answer 1

당신은 오타가, semicolumn는 ['time']의 외부해야한다 :

.attr('y', function(d) {return h - (d['time';])}) 

이

.attr('y', function(d) {return h - d['time'];}) 

당신은 오류를 식별 할 수있는 개발자 콘솔에 표시된 오류 메시지를 보라해야한다.

질문 업데이트 후 편집 :

당신의 자바 스크립트 코드가 <script type="text/javascript"> 감싸해야하며 </script>