D3数据格式，如可缩放的日冕图
D3 data format like zoomable sunburst chart
我将我的数据格式化为本例中使用的flare.json:
我只是想知道d3 zoomable chart uses是什么功能来获得这种格式的数据
耀斑。Json就像这样
{
name: "stuff",
children: [
....
]
}
，在这个例子中它被转换成这个。这是哪条线?
{
children: Array[17]
depth: 1
dx: 0.6028744305756647
dy: 0.25
name: "A name would appear here"
parent: Object
value: 39850000.06
x: 0
y: 0.25
}
var total_revenue = json.total_revenue;
json = json.chart_data;
var width = 840,
height = width,
radius = width / 2,
x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
padding = 5,
duration = 1000;
var div = d3.select("#chart_render");
div.select("img").remove();
var vis = div.append("svg")
.attr("width", width + padding * 2)
.attr("height", height + padding * 2)
.append("g")
.attr("transform", "translate(" + [radius + padding, radius + padding] + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
console.log(json);
var nodes = partition.nodes({children: json});
var path = vis.selectAll("path").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", colour)
.on("click", click);
var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
.style("fill-opacity", function(d) {
var relative_percent = 0;
var relative_total = 0;
//console.log(d);
if (d.depth != 0) {
for(var i = 0; i < d.parent.children.length; i++) {
relative_total += d.parent.children[i].value;
}
//console.log(relative_total);
relative_percent = d.value/total_revenue*100;
if (relative_percent > 1) {
return '1';
} else {
return '0';
}
}
})
.style("fill", function(d) {
return "#fff";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", click);
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
function click(d) {
path.transition()
.duration(duration)
.attrTween("d", arcTween(d));
// Somewhat of a hack as we rely on arcTween updating the scales.
text.style("visibility", function(e) {
return isParentOf(d, e) && e.value > 1500000 ? null : d3.select(this).style("visibility");
})
.transition()
.duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1;
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
.each("end", function(e) {
d3.select(this).style("visibility", function (d) {
// var relative_total = 0;
// var relative_percent = 0;
// for(var i = 0; i < d.parent.children.length; i++) {
// relative_total += d.parent.children[i].value;
// }
// console.log(relative_total);
// relative_percent = d.value/relative_total*100;
// console.log(relative_percent);
return isParentOf(d, e) && e.value > 1500000 ? null : "hidden";
})
});
}
function isParentOf(p, c) {
if (p === c) return true;
if (p.children) {
return p.children.some(function(d) {
return isParentOf(d, c);
});
}
return false;
}
function colour(d) {
if (d.depth == 0) {
return "rgb(250, 250, 250)";
} else if (d.depth == 1) {
return 'rgb(86, 135, 209)';
} else if (d.depth == 2) {
return 'rgb(222, 120, 59)';
} else if (d.depth == 3) {
return 'rgb(106, 185, 117)';
}
// if (d.children) {
// // There is a maximum of two children!
// var colours = d.children.map(colour),
// a = d3.hsl(colours[0]),
// b = d3.hsl(colours[1]);
// // L*a*b* might be better here...
// return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2);
// }
// return d.colour || "#fff";
}
// Interpolate the scales!
function arcTween(d) {
var my = maxY(d),
xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, my]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d) {
return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function maxY(d) {
return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
// http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function brightness(rgb) {
return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
}
这一行:
var nodes = partition.nodes({children: json});
设置日蚀图的代码说明
用D3的说法，日照图是基于D3的"分区布局"。实际上，D3"分区布局"在某种程度上是更通用的术语，因为它不仅可以用于显示sunburst图，还可以用于显示基于"分区"父节点的其他概念(因此称为"分区")。这也是注意到"布局"answers"图表"(在D3思维中)之间区别的一个有用的例子，但这是另一个故事。
下面两行是初始化分区布局的第一步:
var partition = d3.layout.partition()
.value(function(d) { return d.size });
这行做所有的计算:
var nodes = partition.nodes({children: json});
然后变量节点可用于定义svg元素(弧线和标签)的实际视觉外观:
var path = vis.selectAll("path").data(nodes);
和
var text = vis.selectAll("text").data(nodes);
这两行表示通常称为"数据绑定"的东西。它们使程序员能够使用数据来驱动视觉元素，如下所示:
.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
这里d.name来源于数据，d.depth是通过分区布局添加的。它们都是nodes的一部分。
我试图用简单的术语来解释，但可能有一些让你困惑的地方——别担心，如果你读了正确的文档和教程，你很快就会明白的。div;)
相关文章：
- d3-将数据附加到轴以进行重新缩放
- 在交互式图表中动态缩放数据，其中数据会发生变化
- 如何根据浏览器缩放自动调整数据表
- 在某些缩放级别不显示数据的图表
- 如何更改数据缩放图像值
- 是否有一个好的图表 API，可以在滚动/缩放时使用 Ajax 延迟加载大型数据集
- 在 d3.js 中缩放数据集
- 如何在openstreetmap中编辑数据层可见性的缩放级别
- 图表与动态图:数据采样取决于缩放
- 如何在可缩放的日冕图中使用CSV数据
- AmMap -在更新地图数据后保持相同的缩放级别和位置
- 在使用D3和React缩放时更新数据
- 可缩放d3折线图有消失的数据
- 在缩放jqplot后获取画布中的数据点列表
- 没有缩放，Highstock没有显示最大数据值
- D3数据格式，如可缩放的日冕图
- D3.JS时间序列折线图，具有实时数据、平移和缩放功能
- 数据在每次平移和缩放时加载
- d3js可缩放冰柱数据
- 如何在d3.js中缩放GIS数据?
