與Apache齊柏林使用d3.js

Question

我試圖用d3.js

我發現了一個例子，其中有人leaflet.js here做到了，並試圖整合其添加更多的可視化選項到Apache齊柏林做類似的事情 - 不幸的是我對angularJS不太熟悉（Zeppelin用來解釋前端語言）。我也沒有流式傳輸數據。下面是我的代碼，利用d3.js

%angular 
<div> 
    <svg class="chart"></svg> 
</div> 
<script> 
function useD3() { 
    var data = [4, 8, 15, 16, 23, 42]; 

    var width = 420, 
     barHeight = 20; 

    var x = d3.scale.linear() 
     .domain([0, d3.max(data)]) 
     .range([0, width]); 

    var chart = d3.select(".chart") 
     .attr("width", width) 
     .attr("height", barHeight * data.length); 

    var bar = chart.selectAll("g") 
     .data(data) 
     .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

    bar.append("rect") 
     .attr("width", x) 
     .attr("height", barHeight - 1); 
} 

if (window.d3) { 
    useD3(); 
} else { 
    var sc = document.createElement('script'); 
    sc.type = 'text/javascript'; 
    sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'; 
    sc.onload = useD3; 
    sc.onerror = function(err) { alert(err); } 
    document.getElementsByTagName('head')[0].appendChild(sc); 
} 
</script> 

不過只是一個簡單的教程例如，在飛艇，它完成沒有錯誤運行，並且我得到的是一個空白格。任何幫助表示讚賞。

Answer 1

飛艇的版本是0.7.0。該示例適用於此版本。您也可以使用html顯示系統。結果在圖片上。