如何開始使用xampp的d3js示例？

對於現代JavaScript庫（如protovis和d3js）來說，所有很酷的東西都給我留下了深刻的印象。作爲一名生態學家，我擁有大量的數據，對於這些先進的可視化技術來說是完美的。不幸的是，我在下載d3js庫後已經丟失了。 :(如何開始使用xampp的d3js示例？

我在http://d3js.org上看到，爲了讓這些示例運行，我必須設置一個本地主機，我在windows 7系統上安裝了一個xampp系統，本地主機/ xampp告訴我一切正常，但仍然不能例如「albers」只顯示一個灰色框，示例「bar」確實按照它應該運行（我想）

任何人都可以給我一個提示如何在Windows上正確啓動如果我找到了正確的方法，我會爲自己的世界做出自己的教程。

我知道我的問題聽起來很無聊和不愉快，因爲它是絕對的初學者的問題，我非常抱歉，但我真的想與d3js合作，因爲我有許多好的（？）想法。

謝謝！

來源

2012-10-03 Jens

你在做什麼錯在這裏不知道是什麼。我剛剛下載了[zip文件]（https://github.com/mbostock/d3/zipball/master）並將其解壓縮到'C：\ path \ to \ xampp \ htdocs \ d3examples'，以便此文件夾現在包含如'src'，'lib'，'examples'等文件夾。在Chrome和Firefox中訪問'http：// localhost/d3examples/examples/albers/albers.html'會顯示正確的地圖。試圖打開'albers。直接通過雙擊獲得一個空白頁面。 – mtariq

現在它的作品，非常感謝你的好解釋！我不知道解壓縮到htdocs。這意味着，對於一些示例，它需要「localhost/example.html」地址。謝謝！如果我能，我會檢查你的答案是最正確的。 – Jens

當您嘗試在本地運行靜態文件時，某些瀏覽器中的某些d3示例庫中的示例可能會產生錯誤。 Mike建議您在瀏覽示例時運行python的simplehttpserver。

看到這裏說明： https://github.com/mbostock/d3/wiki

python -m SimpleHTTPServer 8888

來源

2012-10-04 06:38:22

謝謝。我早些時候嘗試過，但不知道該怎麼做。在閱讀了mtariq的評論之後，我明白了，我只需輸入'localhost：8888/d3examples /'...就可以了！大！ – Jens

啊，我注意到，我只工作沒有：8888所以只有瀏覽器應該讀'localhost/d3examples/examples/albers/albers.html' – Jens

d3.js是一個客戶端 JavaScript庫，所以你不需要任何服務器在後臺。開始使用靜態文件。下面是一個簡單的例子：

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>My first d3.js</title> 
    <link href="style.css" rel="stylesheet"> 
    </head> 

    <body> 
    <div id="mySVG"></div> 
    <script src="http://d3js.org/d3.v2.js"></script> 
    <script> 
     var svg = d3.select("#mySVG") 
     .append("svg") 
     .attr("width", 200) 
     .attr("height", 200) 

     svg.append("text") 
     .attr("x", 50) 
     .attr("y", 50) 
     .attr("class", "text") 
     .text("d3.js is awesome") 
    </script> 
    </body>

和造型一個style.css文件：

.text { 
    fill: blue; 
}

在瀏覽器

打開index.html，你會看到一個藍色文字說「d3.js真棒」。更多有用的教程是：

，當然還有

https://github.com/mbostock/d3/wiki/Tutorials

來源

2012-10-03 13:20:31 zemirco

親愛的Mirco，非常感謝您的示例。我知道在dj3s.org上的源代碼已經足夠了。我現在會仔細閱讀所提出的教程。 – Jens

如何開始使用xampp的d3js示例？

回答

相關問題