Question

我在django网络应用中使用d3js。我有一个静态js脚本，其中包含一个函数，用于呈现给定一些数据（在上下文中传递）和一个选择（例如histogram(data,selection)）的可视化。为什么d3会忽略传递的选择并直接附加到正文？

这是我的代码的简化版本。

模板：

{% load staticfiles %}
<script type="text/javascript" src="{% static 'd3.js' %}"></script>
<script src="{% static 'myd3vis.js' %}"></script>
<body>
 <div class="vis"></div>
 ...
</body>   
<script type="text/javascript">
 mselection = d3.select(".visualization")
 data = {{data|safe}}
 histogram(data,selection)
</script>

在myd3vis.js文件中，我定义了histogram(data,selection)函数，其中包含以下内容：

svg = console.append("svg").attr({"class":"visualization",
       "width": 100,
       "height":200}) 
...

加载模板时，可视化svg始终附加到正文，而不是附加到<div class="vis">元素。知道为什么会这样吗？

Answer 1

在大多数浏览器的JavaScript环境中，console是一个与DOM无关的全局对象 - 它提供调试功能（例如console.log()）...除非你在其他地方用d3 DOM选择来破坏它， console.append()不太可能以您认为的方式行事。

将console替换为真正的d3选择，例如：

var svg = d3.select('div.vis').attr(…); // et cetera

并检查此对象，以确保您的DOM逻辑是正确的。

为什么d3总是附加到身体而不是我的选择？

1 个答案: