- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 CSV,我想将其转换为分层 JSON 以与 Bilevel Partition 一起使用.
双层分区希望其 JSON 数据的格式与此类似 flare.json file 。基本上,叶节点具有 name
和 size
属性,并且其间的所有内容都有 name
和 children
属性。
这是我尝试将 CSV 文件转换为分层 JSON 的代码。
代码
var root = { "key": "Leeds CCGs", "values": d3.nest()
.key(function(d) { return d.ccgname; })
.key(function(d) { return d.practicename; })
.key(function(d) { return d.diagnosisname; })
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.numpatientswithdiagnosis; }) })
.entries(data)
}
上面的代码可以为数据提供所需的层次结构,但是标签是错误的。而不是name
,而是children
和 size
它只给我 key
和 value
,一直到叶节点,类似于 this file .
所以我四处阅读,发现 this question所以,这与 Bilevel Partition 无关,但我认为同样的原则也适用,因为两种布局都需要分层 JSON 数据。
所以我开始做同样的事情,但我就是无法让它发挥作用。首先,在我的代码中,我没有 SO 问题中提到的 size()
函数。这是我的整个代码,几乎是从 official example 复制的。 :
代码
d3.csv('data/partition.csv', function (data) {
var root = { "key": "Leeds CCGs", "values": d3.nest()
.key(function(d) { return d.ccgname; })
.key(function(d) { return d.practicename; })
.key(function(d) { return d.diagnosisname; })
.rollup(function(leaves) { return d3.sum(leaves, function(d) { return d.numpatientswithdiagnosis; }) })
.entries(data)
}
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
partition
.value(function(d) { return d.values; })
.nodes(root)
.forEach(function(d) {
d._children = d.values;
d.sum = d.value;
d.key = key(d);
d.fill = fill(d);
});
// Now redefine the value function to use the previously-computed sum.
partition.children(function(d, depth) {
return depth < 2 ? d._children : null;
}).value(function(d) {
return d.sum;
});
var center = svg.append("circle")
.attr("r", radius / 4)
.style('fill-opacity', '.2')
.style('cursor', 'pointer')
.on("click", zoomOut);
center.append("title")
.text("zoom out");
var path = svg.selectAll("path")
.data(partition.nodes(root).slice(1))
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return d.fill; })
.style('cursor', 'help')
.each(function(d) { this._current = updateArc(d); })
.on("mouseover", update_legend)
.on("mouseout", remove_legend)
.on("click", zoomIn);
function zoomIn(p) {
if (p.depth > 1) p = p.parent;
if (!p.children) return;
zoom(p, p);
}
function zoomOut(p) {
if (!p.parent) return;
zoom(p.parent, p);
}
// Zoom to the specified new root.
function zoom(root, p) {
if (document.documentElement.__transition__) return;
// Rescale outside angles to match the new layout.
var enterArc,
exitArc,
outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);
function insideArc(d) {
return p.key > d.key
? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
: {depth: 0, x: 0, dx: 2 * Math.PI};
}
function outsideArc(d) {
return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
}
center.datum(root);
// When zooming in, arcs enter from the outside and exit to the inside.
// Entering outside arcs start from the old layout.
if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);
path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });
// When zooming out, arcs enter from the inside and exit to the outside.
// Exiting outside arcs transition to the new layout.
if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);
d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
path.exit().transition()
.style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
.attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
.remove();
path.enter().append("path")
.style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
.style("fill", function(d) { return d.fill; })
.style('cursor', 'help')
.on("mouseover",update_legend)
.on("mouseout",remove_legend)
.on("click", zoomIn)
.each(function(d) { this._current = enterArc(d); });
path.transition()
.style("fill-opacity", 1)
.attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
});
}
});
function key(d) {
var k = [];
var p = d;
while (p.depth) k.push(p.key), p = p.parent;
return k.reverse().join(".");
}
function fill(d) {
var p = d;
while (p.depth > 1) p = p.parent;
var c = d3.lab(hue(p.key));
c.l = luminance(d.sum);
return c;
}
function arcTween(b) {
var i = d3.interpolate(this._current, b);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function updateArc(d) {
return {depth: d.depth, x: d.x, dx: d.dx};
}
以上所有内容在我的浏览器中给了我这个:
最佳答案
您应该能够通过简单地将 d3.nest() 的分层输出转换为与flare.json 数据集相同的格式来精确地重用其余代码,如下所示:
(应在定义root
后立即运行)
//rename object keys generated from d3.nest() to match flare.json format
renameStuff(root);
function renameStuff(d) {
d.name = d.key; delete d.key;
if (typeof d.values === "number") d.size = d.values;
else d.values.forEach(renameStuff), d.children = d.values;
delete d.values;
}
您还可以更改 d3.layout.partition()
对象的访问器函数以匹配新对象,但您至少需要更改原始对象的结构,以便叶节点不将值存储在与子节点相同的字段名称中。上面的解决方案可能是让事情快速运转的最简单方法。
关于javascript - 将分层 JSON 转换为flare.json 格式,以便在双层分区中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26866368/
如何在 Flare by 2Dimensions 上通过“编辑顶点”选项使用关键帧? 我的用例:我想通过拖动顶点将矩形转换为不同的形状来为矩形设置动画。 最佳答案 单击右侧面板中的“转换为路径”。然后
我正在尝试让 Flare 动画在 Flutter 中运行。为此,我尝试了这个: https://github.com/tarek360/Boring-Star-Animation 实际上,该代码工作
我试图在从网络加载图像时显示图像占位符,并将占位符替换为带有淡入动画的实际图像。当我使用 Assets 中的简单 png 图像时,这可以正常工作。 以下是现有代码: FadeInImage(place
我的原始 Flare 文件/动画为其所有动画定义了一条三次曲线。但是当我在我的 Flutter 应用程序上导出并运行相同的动画时,它似乎使用了线性曲线。我已经多次导出文件并进行了不同的更改,但没有成功
我试图在 Flutter Web(开发 channel - v1.13.2)上创建一个简单的网页,但出现了这个奇怪的问题。当我尝试将 Flare 动画放置在分别具有 2 个附加小部件、背景和居中文本的
我已经开发了我的作品集,并且在本地一切正常,但当我将它上传到我的主机时,CSS 呈现不同。 我在 Chrome 上用力刷新,也在 Firefox 上尝试过,但仍然不同。 问题和解决方案是什么? 这是我
我在 python 中有这样的数据: [['a', 'b', 'c', 50], ['a', 'b', 'd', 100], ['a', 'b', 'e', 67], ['a', 'g', 'c
我正在尝试使用 MadCap Flare 元素生成 pdf 文件,但生成的 PDF 文件字体错误。我使用的是最新版本的 Flare,2019r2。 我正在尝试使用 Duotype 的 Flexo 字体
我有一个 networkx 图 g 我想画出这个可视化 http://mbostock.github.io/d3/talk/20111018/tree.html 这意味着我必须以某种方式将我的图形转换
我正在尝试在 Flutter 中重新播放 Flare 动画。动画完成后不循环播放。我想要一个按需播放的动画,同样的动画。 当我在动画之间切换时,只要交换字符串并调用 setState 就可以正常工作。
更新:我在其底部添加了一个codesanbox,其中包含我需要完成的操作的更详细说明。 所以我不太明白类在 React 中是如何工作的,我是 React 新手,并且使用过一点 useState,但从来
我目前正在与 Treemap 合作D3.js 的可视化,希望了解示例中使用的flare.json 是如何组织的。 json 输入文件的格式是否需要与示例中使用的结构完全相同。我有一个来自网络爬虫的输入
我正在使用众所周知的 flare.json 文件: { "name": "flare", "children": [ { "name": "analytics", "childre
我和我的同事正在使用 D3 可视化。具体来说,我们从 this example 开始.此可视化似乎使用了与 flare API 相关的某种 json。 在示例 json 中,有如下几行: "name
我有一个 defaultdict(list) 并且我使用了 simplejson.dumps(my_defaultdict) 以将 defaultdict 输出为 JSON 格式.我正在使用 http
我有一个扁平的 json 文件结构,例如: [ { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 }, { "name
在我的 D3 Flare Graph 中,当每个圆圈只有一个标签时,标题和标签会重叠。我想渲染内部标签,避免与圆圈标题重叠,它在每个圆圈的中间渲染。 var flareGraph = function
我有一个像这样的 json: { "a": { "x": { "y": { "a": {}, "z": {},
我在我的网站上遇到了这个奇怪的 SSL 问题。该域指向 Cloudflare,我正在使用灵活的 SSL 设置。通用默认证书在 Cloudflare 上设置。现在我所有的设备(android、ios、w
我使用的是 Cloud Flare Flexible SSL。我想为除 rss 提要之外的所有站点强制使用 SSL。 我试着用下面的代码来做,但得到了 ERR_TOO_MANY_REDIRECTS R
我是一名优秀的程序员,十分优秀!