का उपयोग d3.js

Question

मैं अपाचे टसेपेल्लिन के लिए और अधिक दृश्य विकल्प जोड़ने के लिए d3.js

जहां किसी leaflet.js here साथ यह किया मैं एक उदाहरण पाया, और करने की कोशिश की के साथ एकीकृत करके कोशिश कर रहा हूँ कुछ ऐसा ही करें - दुर्भाग्य से मैं angularJS से बहुत परिचित नहीं हूं (क्या ज़ेपेल्लिन फ्रंट एंड भाषाओं की व्याख्या करने के लिए उपयोग करता है)। मैं डेटा स्ट्रीमिंग भी नहीं कर रहा हूं। नीचे मेरी कोड यह कोई त्रुटि के साथ चल रहा खत्म, और सभी मैं एक खाली div है, 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 है। उदाहरण इस संस्करण में काम करता है। आप एचटीएमएल डिस्प्ले सिस्टम का भी उपयोग कर सकते हैं। परिणाम चित्रों पर हैं।