将 d3.js 与 Apache Zeppelin 一起使用

Posted 2023-03-23

【中文标题】将 d3.js 与 Apache Zeppelin 一起使用

【英文标题】：Using d3.js with Apache Zeppelin

【发布时间】：2016-07-24 16:37:46

【问题描述】：

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

我找到了一个例子，有人用leaflet.js here 做这件事，并试图做类似的事情——不幸的是我对angularJS（Zeppelin 用来解释前端语言的东西）不太熟悉。我也不是流数据。下面是我的代码，仅使用 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。任何帮助表示赞赏。

【问题讨论】：

你解决了这个问题吗？

您的示例适用于 Zeppelin 版本 0.6.0-SNAPSHOT

在 0.7.1 版中工作正常

我正在寻找的解决方案在问题中！谢谢:-)

【参考方案1】：

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

【讨论】：

您能否将其粘贴为代码而不是图片。谢谢