Question

我正在学习D3.js，我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3 Graphic</title>
</head>
<body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>

我在我的Mac上使用Chrome作为浏览器。我犯了一个明显的错误吗？谢谢！

Answer 1

你的代码本身并没有什么错误，除了它什么都不做的事实（我个人会把头部中的脚本src＆＃39;标记）。您只需编写一个HTML文档，然后在D3.JS Javascript库中加载。

您现在需要做的是通过发出一些D3命令从数据创建HTML / DOM元素来开始使用库。有很多东西可以在互联网上阅读（尝试使用dashingd3js.com），但是为了让你从这里开始是一个v.simple入门，可以扩展你的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Column Chart</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chartarea"></div>
<script type="text/javascript">
    // Some random data
    var data = [0.27, 0.5, 0.1, 0.15, 0.3, 0.21, 0.25, 0.94, 0.04, 1.00];

    var svg = d3.select('#chartarea')
        .selectAll('div')
        .data(data)
    .enter()
        .append('div')
        .attr('class', 'bar')
        .style('height', function (d) {
            return d * 400 + 'px';
        });
</script>
</body>
</html>

上面应该使用HTML DIV创建一个v.simple柱形图。然后，您可以继续使用更高级的实现来生成SVG组件。

另见这里的例子： http://bl.ocks.org/jamesleesaunders/260cf482c8a56d49dfa6

运行D3.js的问题

1 个答案: