- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在按照 http://bl.ocks.org/mbostock/4063423 中的示例进行操作创建旭日图并收到 Uncaught TypeError: Cannot read property 'length' of undefined 错误,但不确定原因。这是我在错误发生之前记录的内容的图像:
index.html:49是返回d.children? d. child :d.条目? d.entries() : d.text? null : d.value.length ? d.value : d.value.entries();
在我的分区变量中。我意识到该对象没有 value
键,但我不确定为什么没有或如何解决这个问题,因此我们将不胜感激!请参阅下面的完整代码以及 Google 表格上数据的链接。
var width = 960,
height = 700,
radius = Math.min(width, height) / 2,
color = d3.scale.category20c();
var hiearchicalDataScale = d3.scale.linear().range([0,1135840])
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; })
.children(function(d) {
console.log(d)
return d.children? d.children : d.entries ? d.entries() : d.text? null : d.value.length ? d.value : d.value.entries();
});
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.tsv("data.tsv", function(error, root) {
var data = root.filter(function(d) {
if(d.OilCum.indexOf("/") === -1 && d.OilCum.indexOf("_") === -1) {
d.OilCum = +d.OilCum
return d
}
})
.map(function(d) {
return { Reservoir: d.Reservoir, OilCum: d.OilCum, Field: d.Field }
})
var hiearchicalData = d3.nest()
.key(function(d) {return d.Reservoir})
.key(function(d) {return d.Field})
.map(data, d3.map)
hiearchicalDataScale.domain([
d3.min(data, function(d) { return d.OilCum}),
d3.max(data, function(d) { return d.OilCum})
])
var path = svg.datum(hiearchicalData).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) {
return color(d.children ? d.key : d.text);
})
.style("fill-rule", "evenodd")
.each(stash);
d3.selectAll("input").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.OilCum; };
path
.data(partition.value(value).nodes)
.transition()
.duration(1500)
.attrTween("d", arcTween);
});
});
// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
}
最佳答案
问题出在这里:
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; })
.children(function(d) {
console.log(d)
return d.children? d.children : d.entries ? d.entries() : d.text? null : d.value.length ? d.value : d.value.entries();
});
当你这么做的时候它就会崩溃
d.children? d.children : d.entries ? d.entries() : d.text? null : d.value.length ? d.value : d.value.entries();
注意,在 d.value.length 中,对于某些值,d.value 是未定义,因此您会收到错误长度未定义。
我改变了这一行:
d.children? d.children : d.entries ? d.entries() : d.text? null : d.value ? d.value.entries() : null;
这里我检查 d.value 是否未定义,如果是,则返回 d.value.entries(),否则返回 null。
关于javascript - 旭日可视化中的 d3js 分区布局错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32716112/
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。
目录 内置的高亮节点 自定义高亮 自定义高亮时保持原始颜色 总结 案例完整代码 通过官方文档,可知高
目录 32.go.Palette 一排放两个 33.go.Palette 基本用法 34.创建自己指向自己的连线 35.设置不同的 groupTemplate 和
目录 41.监听连线拖拽结束后的事件 42.监听画布的修改事件 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作) 44.监听节点鼠标
织梦初秋 那是一个宜人的初秋午后,阳光透过窗户洒在书桌上,我轻轻地拂去被阳光映照出的尘屑,伸了个懒腰。哎呀,这个世界真是奇妙啊,想到什么就能用代码实现,就像笔尖上点燃的火花。 思索的起点 我一直对天气
曲径通幽,古木参天 时光匆匆,不经意间已是2023年的秋季。我身处在这个充满朝气和变革的时代,每天都充满了新的科技突破和创新。而当我想起曾经努力学习的Python编程语言时,心中涌动着一股热情,渴望将
我有一个堆积条形图,由一个 bool 字段分割。这会导致图例显示为两种颜色(很酷!)但图例具有以下值:true 和 false。对于读者来说,什么是真或假意味着什么是没有上下文的。 在这种情况下,字段
我想在 R 中做一个简单的一阶马尔可夫链。我知道有像 MCMC 这样的包,但找不到一个以图形方式显示它的包。这甚至可能吗?如果给定一个转换矩阵和一个初始状态,那将会很好,人们可以直观地看到通过马尔可夫
我是 tableau 的新手,我有以下可视化,这是链接: My visualization 我的问题是我不知道如何在一个仪表板中添加多个仪表板作为选项卡。在我的可视化中,有三个仪表板“Nota tot
我建立类似自动VJ程序的东西。我有2个网络摄像头发出的2个incomig视频信号和一些可视化效果(目前2个,但我想要更多)。我有一个以dB为单位的传入音频信号音量,以bpm为单位。我需要的是视频输出的
我需要可视化的东西,并想要求一些提示和教程。或者使用哪种技术(Cocos2D、OpenGL、Quartz,...) 这里有人在 iOS 设备上做过可视化吗? 它是关于移动物体、褪色、粒子等等…… 任何
我对 Graphviz 越来越熟悉,想知道是否可以生成如下所示的图表/图表(不确定你叫它什么)。如果没有,有人知道什么是好的开源框架吗? (首选,C++,Java 或 Python)。 最佳答案 根据
问题很简单——我真的很喜欢用 UIStackView 来组织 UI。但是,我在测试应用程序中看不到 UIStackView 边界。当 UI 元素不是预期的时候,我需要花很多时间来调试。在网上搜索,我找
例如,我可以通过以下方式分配内存时的情况: Position* arr1 = new Position[5]; Position 是我程序中的一个类,它描述了具有 x 和 y 值的位置点。 堆栈上会有
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 5 年前。
我最近一直在处理许多半复杂的 XSD,我想知道:有哪些更好的工具可以处理 XML 模式?有没有图形工具? 独立的或基于 Eclipse 的是理想的选择,因为我们不是 .net 商店。 最佳答案 我找到
通过一段时间的使用和学习,对G6有了更一步的经验,这篇博文主要从以下几个小功能着手介绍,文章最后会给出完整的demo代码。 目录 1. 树图的基本布局和
三维数据的获取方式 RGBD相机和深度图 代码展示:在pcl中,把点云转为深度图,并保存和可视化 三维数据的获取方式 在计算机视觉和遥感领域,点云可以通过四种主要的技术获得, (1)根据图像衍生而得,
代码 library(igraph) g <- graph.tree(n = 2 ^ 3 - 1, children = 2) node_labels <- c("", "Group A", "Gro
我正在关注 this tutorial并创建了一个这样的图表: from dask.threaded import get from operator import add dsk = { 'x
我是一名优秀的程序员,十分优秀!