实现d3 Codeflower源代码

Question

我正在尝试使用自己的json数据在http://redotheweb.com/CodeFlower/中复制此可视化效果。 但是，可视化没有显示出来，我怀疑是因为我放错了这段代码

var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);

它将根据jsonData文件中的内容更新可视化效果。 完整的代码如下：

<html>
<head> </head>
<body>
    <div class = "content">
        <div class = "container">
            <p class = "lead"> </p>
            <div id = "visualization">
                <svg width = "270" height = "270">
                    var myFlower = new CodeFlower("#visualization", 300, 200);
                    myflower.update(jsonData);
                </svg>
            </div>
        </div>
    </div>
    <script type = "text/java
    <script type="text/javascript" src="javascripts/d3/d3.js"></script>
    <script type="text/javascript" src="javascripts/d3/d3.geom.js"></script>
    <script type="text/javascript" src="javascripts/d3/d3.layout.js"></script>
    <script type="text/javascript" src="javascripts/CodeFlower.js"></script>
    <script type="text/javascript" src="javascripts/dataConverter.js"></script>
    <script type="text/javascript"> </script>
</body>

请帮忙。 谢谢。

Answer 1

您的代码不太正确。 我认为您可以省去SVG元素，并将CodeFlower初始化代码移至空脚本标签。 尝试以下方法：

<html>
<head> </head>
<body>
    <div class = "content">
        <div class = "container">
            <p class = "lead"> </p>
            <div id = "visualization">
              <!-- this empty div is what gets used by CodeFlower -->
            </div>
        </div>
    </div>
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="d3.geom.js"></script>
    <script type="text/javascript" src="d3.layout.js"></script>
    <script type="text/javascript" src="CodeFlower.js"></script>
    <script type="text/javascript" src="dataConverter.js"></script>
    <script type="text/javascript">
        var myFlower = new CodeFlower("#visualization", 300, 200);
        myFlower.update(jsonData);
    </script>
</body>
</html>

根据文档：

用法

要创建CodeFlower，请将CodeFlower.js文件与d3.js一起包含在此页面中。 使用CSS选择器（ 应该插入花的div的位置 ）以及所需可视化的宽度和高度，创建一个新的CodeFlower实例。 然后，使用CodeFlower.update（）将JSON数据绑定到花朵上，您就完成了。

CodeFlower会在您提供的DIV中创建SVG元素本身。 从CodeFlower源代码中：

this.svg = d3.select(selector).append("svg:svg")
  .attr('width', w)
  .attr('height', h);

因此，为CodeFlower添加您自己的SVG标签是多余的。

编辑：

确保您具有有效的jsonData变量： var jsonData = { /* json data here */ };

这是一个有效的小提琴： http : //jsfiddle.net/2DUy9/1/

Answer 2

您正在谈论的代码块是javascript，因此它必须位于脚本标签内-代码末尾有一个不错的空代码。 照原样，您的“代码”只是作为纯文本阅读。 如果它在常规HTML元素内，则代码将在网页上显示为文本，但是SVG标签内的文本甚至不被理解为纯文本，因为SVG应该包含图形。

然后，您必须在脚本中指出要将图形添加到哪个SVG元素。 只是将一些代码放在HTML的中间并不能使代码的结果到达那里-即使将它们放在script标签内。 但是，您正在借用的代码正在寻找<div id="visualization"></div>标记，并且在将脚本格式化为建议的@Colin格式后，应将其绘制在此处-但前提是您的脚本有点在导入CodeFlower脚本的脚本标签之后。 否则，您只会在控制台中看到错误，而屏幕上什么也没有。

恐怕您将需要花一些时间来弄清楚该程序的所有不同部分的功能，然后才能有效地使它们适应您的需求。

Mozilla开发网络有一些不错的入门指南：

在HTML标记上
关于Javascript

对于D3，没有编码经验的初学者最好的介绍是Scott Murray的作品：

http://alignedleft.com/tutorials/d3/

实现d3 Codeflower源代码

问题描述

2 个解决方案

解决方案1
1 2014-01-12 22:59:08

解决方案2
0 2014-01-12 22:48:49

实现d3 Codeflower源代码

问题描述

2 个解决方案

解决方案1 1 2014-01-12 22:59:08

解决方案2 0 2014-01-12 22:48:49

解决方案1
1 2014-01-12 22:59:08

解决方案2
0 2014-01-12 22:48:49