将d3.js与Apache Zeppelin一起使用 [英] Using d3.js with Apache Zeppelin

问题描述

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

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

我找到了一个例子，其中有人用leaflet.js < a href =https://gist.github.com/granturing/a09aed4a302a7367be92>这里，并尝试做类似的事情 - 不幸的是我对angularJS不太熟悉（Zeppelin用来解释前端的东西）语言）。我也没有流数据。下面是我的代码，只使用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>

然而，在Zeppelin中，它完成了没有错误的运行，而我得到的只是一个空白div。任何帮助表示赞赏。

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

推荐答案

Zeppelin版本是0.7.0。该示例适用于此版本。您还可以使用 html 显示系统。结果在图片上。

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.

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