Mit d3.js mit Apache Zeppelin

Question

Ich versuche, mehr Möglichkeiten zur Visualisierung zu Apache Zeppelin hinzufügen, indem Sie es mit d3.js

Integration fand ich ein Beispiel, wo jemand tat es mit leaflet.js here und versuchte zu mach etwas Ähnliches - leider kenne ich angularJS nicht sehr gut (was Zeppelin benutzt, um Front-End-Sprachen zu interpretieren). Ich streame auch keine Daten. Unten ist mein Code, aus nur ein einfaches Tutorial Beispiel mit 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> 

jedoch in Zeppelin, endet es ohne Fehler läuft, und alle erhalte ich eine leere div. Jede Hilfe wird geschätzt.

Answer 1

Die Zeppelin-Version ist 0.7.0. Das Beispiel funktioniert in dieser Version. Sie können auch das html Anzeigesystem verwenden. Die Ergebnisse sind auf den Bildern.