在 Apache Zeppelin 中使用 d3.js [英] Using d3.js with Apache Zeppelin

问题描述

我正在尝试通过将 Apache Zeppelin 与 d3.js 集成来为它添加更多可视化选项

我发现了一个例子，有人用 Leaflet.js

Zeppelin 版本是 0.7.0.该示例在此版本中有效.您还可以使用 html 显示系统.结果在图片上.

I'm trying to add more visualization options to Apache Zeppelin by integrating it with d3.js

I found an example where someone did it with leaflet.js here, and tried to do something similar -- unfortunately I'm not too familiar with angularJS (what Zeppelin uses to interpret front end languages). I'm also not streaming data. Below is my code, using just a simple tutorial example from 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>

However, in Zeppelin, it finishes running with no errors, and all I get is a blank div. Any help is appreciated.

解决方案

The Zeppelin version is 0.7.0. The example works in this version. You could also use the html display system. The results are on the pictures.

这篇关于在 Apache Zeppelin 中使用 d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！