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>

根据documentation：

<强>用法

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

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的中间并不会使代码的结果在那里 - 即使它被放在脚本标记内。但是，您借用的代码正在寻找<div id="visualization"></div>标签，并且一旦您将脚本格式化为@Colin建议，就应该将其绘制在那里 - 但前提是您的一点点脚本之后 em>导入CodeFlower脚本的脚本标记。否则，您只会在控制台中出现错误而屏幕上没有任何内容。

我担心你需要花些时间来弄清楚程序的所有不同部分，然后才能有效地适应你的需要。

Mozilla开发网络有一些很好的介绍指南：

On HTML markup

On Javascript

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

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

实现d3 Codeflower源代码

2 个答案: