2016-04-04 16 views
12

Próbuję dodać więcej opcji wizualizacji Apache Zeppelin, integrując go z d3.jsKorzystanie d3.js z Apache Zeppelin

znalazłem przykład, w którym ktoś zrobił to z leaflet.js here i próbował zrobić coś podobnego - niestety nie jestem zbyt zaznajomiony z angularJS (co Zeppelin używa do interpretacji języków front end). Nie przesyłam też danych strumieniowych. Poniżej jest mój kod, używając tylko prosty samouczek przykład z 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> 

Jednak w Zeppelin, to kończy działa bez żadnych błędów, a ja dostać jest pusty div. Każda pomoc jest doceniana.

+0

Czy udało Ci się rozwiązać ten problem? – perrohunter

+1

Twój przykład działa w Zeppelin w wersji 0.6.0-SNAPSHOT –

+2

działa w wersji 0.7.1 po prostu w porządku –

Odpowiedz

1

enter image description here enter image description here

Wersja Zeppelin jest 0.7.0. Przykład działa w tej wersji. Można również użyć systemu wyświetlania html. Wyniki są na zdjęciach.