个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
过去几天我一直在学习 D3。我尝试将我所学到的所有内容简化为一个简单的 D3 示例，但我看到了标题中提到的错误。
我确信这很简单，我错过了什么？
代码:
<html>
<head>
<style>
.node {
fill: #ccc;
stroke: #fff;
stroke-width: 2px;
}
.link {
stroke: #777;
stroke-width: 2px;
}
</style>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
window.onload = function() {
var width = 600,
height = 300;
var graph = {
"nodes": [ { "x": 208.992345, "y": 273.053211 },
{ "x": 595.98896, "y": 56.377057 },
{ "x": 319.568434, "y": 278.523637 },
{ "x": 214.494264, "y": 214.893585 },
{ "x": 482.664139, "y": 340.386773 },
{ "x": 84.078465, "y": 192.021902 },
{ "x": 196.952261, "y": 370.798667 },
{ "x": 107.358165, "y": 435.15643 },
{ "x": 401.168523, "y": 443.407779 },
{ "x": 508.368779, "y": 386.665811 },
{ "x": 355.93773, "y": 460.158711 },
{ "x": 283.630624, "y": 87.898162 },
{ "x": 194.771218, "y": 436.366028 },
{ "x": 477.520013, "y": 337.547331 },
{ "x": 572.98129, "y": 453.668459 },
{ "x": 106.717817, "y": 235.990363 },
{ "x": 265.064649, "y": 396.904945 },
{ "x": 452.719997, "y": 137.886092 }
],
"links": [ { "target": 11, "source": 0 },
{ "target": 3, "source": 0 },
{ "target": 10, "source": 0 },
{ "target": 16, "source": 0 },
{ "target": 1, "source": 0 },
{ "target": 3, "source": 0 },
{ "target": 9, "source": 0 },
{ "target": 5, "source": 0 },
{ "target": 11, "source": 0 },
{ "target": 13, "source": 0 },
{ "target": 16, "source": 0 },
{ "target": 3, "source": 1 },
{ "target": 9, "source": 1 },
{ "target": 12, "source": 1 },
{ "target": 4, "source": 2 },
{ "target": 6, "source": 2 },
{ "target": 8, "source": 2 },
{ "target": 13, "source": 2 },
{ "target": 10, "source": 3 },
{ "target": 16, "source": 3 },
{ "target": 9, "source": 3 },
{ "target": 7, "source": 3 },
{ "target": 11, "source": 5 },
{ "target": 13, "source": 5 },
{ "target": 12, "source": 5 },
{ "target": 8, "source": 6 },
{ "target": 13, "source": 6 },
{ "target": 10, "source": 7 },
{ "target": 11, "source": 7 },
{ "target": 17, "source": 8 },
{ "target": 13, "source": 8 },
{ "target": 11, "source": 10 },
{ "target": 16, "source": 10 },
{ "target": 13, "source": 11 },
{ "target": 14, "source": 12 },
{ "target": 14, "source": 12 },
{ "target": 14, "source": 12 },
{ "target": 15, "source": 12 },
{ "target": 16, "source": 12 },
{ "target": 15, "source": 14 },
{ "target": 16, "source": 14 },
{ "target": 15, "source": 14 },
{ "target": 16, "source": 15 },
{ "target": 16, "source": 15 },
{ "target": 17, "source": 16 }
]
};
var nodes = graph.nodes;
var links = graph.links;
var svg = d3.select("body").append("svg")
.attr({
"width": width,
"height": height
})
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.classed("node", true)
node
.append("circle")
.attr("r", width / 100)
var links = svg.selectAll(".link")
.data(links)
.enter()
.append("line")
.classed("link", true)
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.on("tick", tick)
.start()
function tick() {
node.transition().ease('linear').duration(animationStep)
.attr({
"cx": function(d) {return d.x},
"cy": function(d) {return d.y},
"r": 10
})
link.transition().ease('linear').duration(animationStep)
.attr({
"x1": function(d) {return d.source.x},
"y1": function(d) {return d.source.y},
"x2": function(d) {return d.target.x},
"y2": function(d) {return d.target.y}
})
}
}
</script>
</head>
<body>
</body>
</html>
最佳答案
您遇到的错误源于此错误:
var links = svg.selectAll(".link")
.data(links)
.enter()
.append("line")
.classed("link", true)
您正在覆盖之前声明的变量“links”。这意味着当您稍后在此处传递“链接”时:
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.on("tick", tick)
.start()
它不包含您的原始源/目标链接数组，而是您创建的 d3 对象。我认为您可能指的是 var link 而不是 var links。
修复此问题后，您会发现变量“animationStep”在用于“tick”函数之前并未定义。
关于javascript - 尽管遵循了严格的说明，但仍看到未定义的 "Uncaught TypeError: Cannot read property ' 重量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29519742/
30
4
0
我正在使用 React Native 构建移动应用程序。我面临 Nativ Base Toast 问题。当我第一次加载应用程序然后导航到工单状态时，如果我返回带有 android 后退按钮的主页，则会
我正在尝试创建一个“完美的滚动条”，它是这样的：。Https://github.com/noraesae/perfect-scrollbar-bower。使用尽可能简单的代码：。我犯了以下错误：。当然
我正在尝试在简单的 Draftjs 编辑器上应用自定义装饰器: import React from 'react'; import {Editor, EditorState, RichUtils} f
读取以钟形字符作为分隔符的CSV文件时，出现类型错误。我不想使用熊猫，我需要使用CSV库来解决这个问题。。示例标题：。数据类型。样本数据：。示例代码。我明白这个错误-。铃声字符参考-https://w
我正在处理 useSelector的 react-redux在我的 React Native 应用程序中，我收到以下错误: TypeError: TypeError: (0, _reactRedux.
当我用 Node 运行以下代码时: var command = "/home/myScript.sh"; fs.exists(command, function(exists){ if(exi
我正在为我的一个组件编写测试用例，该组件具有路由器(使用 withrouter)。我收到错误 wrapper.find is not a function。基本要求是需要检查我的渲染中是否存在标签，还
我一直在研究一个简单的表单提交。首先，我想在提交表单之前创建一个模式警报。于是，我使用了bootstrap的modal函数，反复得到 TypeError: $(...).modal is not a
这个问题在这里已经有了答案: Flask-Login raises TypeError: 'bool' object is not callable when trying to override
这是我在leetcode中遇到的问题。您将看到两个非空链接表，表示两个非负整数。数字以相反的顺序存储，并且它们的每个节点都包含一个数字。将这两个数字相加，然后以链表的形式返回总和。。你可以假设这两个数
我正在尝试学习Python，并试图将GitHub问题变成一种可读的形式。根据关于如何将JSON转换为CSV的建议，我得出了以下结论：。其中“Issues.json”是包含GitHub问题的JSON文件
我在使用 Proxy 类时遇到了这个有趣的错误: TypeError: 'set' on proxy: trap returned truish for property 'users' which
在研究Jupyter笔记本电脑时，我遇到了这个问题：。这是代码开始的地方：。下面的代码是在jupyter笔记本的另一个单元上运行的。我怎么才能解决它呢？。尝试更改参数和一系列其他内容，但所有这些都弹出
Working on jupyter notebooks, I came across this problem:在研究Jupyter笔记本电脑时，我遇到了这个问题： TypeError:un
我对此很陌生(对于 Jasmine 测试、ExtJs 和 JS 来说确实很陌生)，我必须修复这个错误/错误。我正在运行一些单元测试，但不断收到以下错误: TypeError: object is no
在下面的文档中，我们可以不使用JupyterDash在笔记本中运行应用程序，而只需运行app.run(jupyter_mode=“外部”)。。Https://dash.plotly.com/dash-
导入地理位置时: import { Geolocation } from '@ionic-native/geolocation/ngx'; 获取错误: ionic Geolocation :Ionic
我定义了以下函数: def eigval(matrix): a = matrix[0, 0] b = matrix[0, 1] c = matrix[1, 0] d =
刚刚获得了SDXL模型的访问权限，希望为即将发布的版本进行测试...不幸的是，我们当前用于我们服务的代码似乎不能与稳定ai/稳定-扩散-xl-base-0.9一起工作，我不完全确定SDXL有什么不同，
这是我的全部代码。我试图通过/insta/：id在我的page.ejs页面上查找，但它显示错误：。无法读取未定义的属性(正在读取‘UserName’)。。我希望获得uuidv4()将提供的id，但它返
我是一名优秀的程序员,十分优秀！