Uso d3.js con Apache Zeppelin

Question

Sto cercando di aggiungere ulteriori opzioni di visualizzazione per Apache Zeppelin integrandola con d3.js

ho trovato un esempio in cui qualcuno ha fatto con leaflet.js here, e ho cercato di fare qualcosa di simile - sfortunatamente non ho molta familiarità con angularJS (quello che Zeppelin usa per interpretare i linguaggi front-end). Inoltre non sto trasmettendo dati. Qui di seguito è il mio codice, utilizzando solo un semplice esempio tutorial da 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> 

Tuttavia, in Zeppelin, che termina l'esecuzione senza errori, e tutto quello che ottiene è un div vuoto. Qualsiasi aiuto è apprezzato.

Answer 1

La versione Zeppelin è 0.7.0. L'esempio funziona in questa versione. È inoltre possibile utilizzare il sistema di visualizzazione html. I risultati sono sulle immagini.