實現d3 Codeflower源代碼

我想在這裏使用我自己的json數據複製這個可視化文件http://redotheweb.com/CodeFlower/。然而，可視化顯示不出來，我懷疑這是因爲我遺失的代碼實現d3 Codeflower源代碼

var myFlower = new CodeFlower("#visualization", 300, 200); 
myflower.update(jsonData);

該塊，更新基於jsonData文件內容的可視化。完整的代碼如下：

<html> 
<head> </head> 
<body> 
    <div class = "content"> 
     <div class = "container"> 
      <p class = "lead"> </p> 
      <div id = "visualization"> 
       <svg width = "270" height = "270"> 
        var myFlower = new CodeFlower("#visualization", 300, 200); 
        myflower.update(jsonData); 
       </svg> 
      </div> 
     </div> 
    </div> 
    <script type = "text/java 
    <script type="text/javascript" src="javascripts/d3/d3.js"></script> 
    <script type="text/javascript" src="javascripts/d3/d3.geom.js"></script> 
    <script type="text/javascript" src="javascripts/d3/d3.layout.js"></script> 
    <script type="text/javascript" src="javascripts/CodeFlower.js"></script> 
    <script type="text/javascript" src="javascripts/dataConverter.js"></script> 
    <script type="text/javascript"> </script> 
</body>

請幫助。謝謝。

來源

2014-01-12 user3183900

JavaScript並沒有在''

嘗試過，但是這也不起作用： '' –

您所談論的代碼塊是JavaScript，因此它需要位於腳本標籤內 - 您的代碼末尾有一個空的標籤。就這樣，你的「代碼」只是被當作純文本閱讀。如果它是在一個普通的HTML元素中，代碼將顯示爲網頁上的文本，但SVG標記內的文本甚至不被理解爲純文本，因爲SVG應該包含圖形。

在腳本中，您必須指出要將圖形添加到哪個SVG元素。只是在HTML中間放置一些代碼並不會使代碼的結果進入到那裏 - 即使它放在腳本標記中。但是，您借用的代碼正在尋找<div id="visualization"></div>標籤，並且應該在您將腳本格式化爲@Colin建議時繪製它 - 但僅當您的腳本的一小部分後腳本標籤導入CodeFlower腳本。否則，你只會在控制檯出現錯誤，屏幕上沒有任何信息。

恐怕在你能夠有效地適應你的需求之前，你將不得不花費一些時間來弄清楚程序的所有不同部分。

Mozilla的開發網絡有一些很好的介紹指南：

對於D3，因爲沒有編碼經驗的初學者最好的介紹是工作斯科特·默裏：

http://alignedleft.com/tutorials/d3/

來源

2014-01-12 22:48:49 AmeliaBR

您的代碼是不太正確的。我認爲你可以放棄SVG元素，並將你的CodeFlower初始化代碼移動到空腳本標記中。試試這個：

<html> 
<head> </head> 
<body> 
    <div class = "content"> 
     <div class = "container"> 
      <p class = "lead"> </p> 
      <div id = "visualization"> 
       <!-- this empty div is what gets used by CodeFlower --> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="d3.js"></script> 
    <script type="text/javascript" src="d3.geom.js"></script> 
    <script type="text/javascript" src="d3.layout.js"></script> 
    <script type="text/javascript" src="CodeFlower.js"></script> 
    <script type="text/javascript" src="dataConverter.js"></script> 
    <script type="text/javascript"> 
     var myFlower = new CodeFlower("#visualization", 300, 200); 
     myFlower.update(jsonData); 
    </script> 
</body> 
</html>

按照documentation：

使用

要創建CodeFlower，包括CodeFlower.js文件一起與d3.js，就像在這一頁。創建一個新的CodeFlower實例使用CSS選擇器（的div應插入花朵），和所需可視化的寬度和高度。然後，使用CodeFlower.update（）將JSON 數據綁定到花，然後就完成了。

CodeFlower在您提供的DIV中創建SVG元素本身。來自CodeFlower源代碼：

this.svg = d3.select(selector).append("svg:svg") 
    .attr('width', w) 
    .attr('height', h);

因此，爲CodeFlower添加自己的SVG標記是多餘的。

編輯：

請確保您有一個有效的jsonData變量：var jsonData = { /* json data here */ };

這裏是工作提琴：http://jsfiddle.net/2DUy9/1/

來源

2014-01-12 22:59:08

謝謝，但我試過你提供的代碼，但它仍然無法正常工作。任何其他的想法？ – user3183900

我在答案的底部添加了一個工作示例。似乎一切正常，但你需要一些json數據供CodeFlower使用。看到提供的小提琴。 –

實現d3 Codeflower源代碼

回答

相關問題