D3 - 從文件加載XML數據，用秤爲條形圖

我對D3以下這個偉大的教程在這裏 http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart D3 - 從文件加載XML數據，用秤爲條形圖

它引入了一個條形圖使用此秤節。現在我想從XML文件加載我的數據，但我的代碼當然不起作用。我猜測，在創造xScale等和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

我強烈建議使用JSON而不是XML--將XML解析並作爲文檔返回，這將是一個很痛苦的工作。 –

謝謝，我用json文件，現在我只是不明白爲什麼沒有顯示...這裏是json文件： http://pastebin.com/y5dviCDW 代碼： http://pastebin.com/ZJtjqe4E – user3294495

簡單的錯誤。您需要使用「d.value」而不是「d」。您的示例數據只是一個數字數組，但是您的JSON數據是具有「值」屬性的對象數組。

試試這個看你的例子：

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

因爲我需要的代碼後的jsfiddle鏈接...這裏是什麼您已經知道一個片段：

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

的「/ 0 /「版本是您發佈到pastebin的原始版本。

來源

2014-02-26 00:45:50 Glenn

非常感謝你！有用！：d – user3294495

D3 - 從文件加載XML數據，用秤爲條形圖

回答

相關問題