Javascript 实现D3CodeFlower源代码_Javascript_Html_D3.js

Javascript 实现D3CodeFlower源代码

javascript html d3.js

Javascript 实现D3CodeFlower源代码,javascript,html,d3.js,Javascript,Html,D3.js,我试图使用我自己的json数据在这里复制这种可视化。然而，可视化并没有出现，我怀疑这是因为我把这段代码放错地方了 var myFlower = new CodeFlower("#visualization", 300, 200); myflower.update(jsonData); 它根据jsonData文件中的内容更新可视化。完整代码如下： <html> <head> </head> <body> <div class = "c

我试图使用我自己的json数据在这里复制这种可视化。然而，可视化并没有出现，我怀疑这是因为我把这段代码放错地方了

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>



var myFlower=新代码花（“可视化”，300200）；
myflower.update（jsonData）；
您正在谈论的代码块是javascript，因此它需要在脚本标记中——代码末尾有一个很好的空代码块。实际上，您的“代码”只是以纯文本形式读取。如果它位于常规HTML元素中，代码将在网页上显示为文本，但SVG标记中的文本甚至不能理解为纯文本，因为SVG应该包含图形
在脚本中，您必须指出要将图形添加到哪个SVG元素。只需在HTML中间放置一些代码就不会使代码的结果出现在那里——即使它被放入脚本标记中。但是，您正在借用的代码正在查找
标记，并且应该在您将脚本格式化为@Colin建议的格式后将其绘制到那里——但前提是您的一小部分脚本位于导入CodeFlower脚本的脚本标记之后。否则，您只会在控制台中得到一个错误，而在屏幕上什么也没有
恐怕你得花点时间弄清楚课程的各个部分都做了些什么，然后才能有效地使它们适应你的需要
Mozilla开发网络有一些很好的介绍指南：




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


您的代码不太正确。我认为您可以省去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添加您自己的SVG标记是多余的
编辑：
确保您有一个有效的jsonData变量：var jsonData={/*json data here*/}
这是一个有用的工具：
JavaScript不在
标记中。将其放在
标记中。尝试了此操作，但也无效：您缺少一个结束标记
。应该是//这里的code也修复了这个问题。我在同一个文件夹中有JSONDATA和JavaScript文件，所以我不确定发生了什么。你的脚本在页面的末尾（在所有其他脚本链接之后？）还是仍然在中间？脚本是按照它们出现的顺序执行的，因此在加载“代码花”脚本之前，您不能告诉浏览器执行“代码花”方法。请参阅我在回答中给出的MDN链接，这样您就可以大致了解浏览器如何解释Javascript。谢谢，但我尝试了您提供的代码，但仍然不起作用。还有其他想法吗？我在答案的底部添加了一个工作示例。一切似乎都很好，但您需要一些json数据才能让CodeFlower进行操作。请看提供的小提琴。
this.svg = d3.select(selector).append("svg:svg")
  .attr('width', w)
  .attr('height', h);