与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显示系统。结果在图片上。