如何使D3 Streamgraph垂直 [英] How to make D3 Streamgraph vertically
本文介绍了如何使D3 Streamgraph垂直的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题：
strong>如何使Streamgraph垂直？
JS
var dataMetric = [
{
id：1，
title：Little Inc，
metrics：{
提供：665，
shares：20，
landings：1124，
leads：1102，
purchases：88，
朋友：74
}
}，
{
id：2，
title：Marvin LLC，
metrics ：{
offers：20，
shares：2，
landingings：20，
leads：25，
purchases 28，
friends：18
}
}，
{
id：3，
title：Hodkiewicz，Jacobson and O'Conner，
metrics：{
offers：834，
shares：8，
landings：759，
：683，
purchases：41，
friends：35
}
}，
{
id：4，
title：Harber，Fahey and Berge，
metrics：{
offers：233，
shares：5，
：352，
leads：348，
purchases：31，
friends：25
}
}
]
var metrics = [offers，shares，landings，leads，purchases，friends];
var width = 500，
height = 200，
colors = {'0'：'＃6ff500'，'1'：'＃ffad0a'，'2'：'＃f90035' ，'3'：'＃6fD000'}，
stack = d3.layout.stack（）。offset（expand）;
var svg = d3.select（＃timeline）。append（svg）
.attr（width，width）
.attr（height，height）;
var y = d3.scale.linear（）
.domain（[0，1]）$ b $ b .range（[height，0]）;
var color = d3.scale.linear（）
.range（[＃0D0，＃060]）;
streamed_history（dataMetric）
function streamed_history（data）{
var m = [];
data_array = metrics.forEach（function（f，metricIndex）{
for（var index in data）{
m [index] = m [index] || [];
m [index] .push（{x：metricIndex，y：data [index] .metrics [f]}）;
}
}）
layers = stack（m）
console.log（m）
layers = dataMetric.map（function（f，i）{
return {layer：layers [i]，companyName：f.title，color：color（i / .length -1））}
}）
var x = d3.scale.linear（）
.domain（[0，metrics.length - 1]）$ b $ b .range（[0，width]）;
var area = d3.svg.area（）/ *。interpolate（basis）* /
.x（function（d）{return x（dx）;}）
.y0（function（d）{return y（null）;}）
.y1（function（d）{return y（d.y0 + dy）;}）;
function fixPath（path）{
var Lidx = path.indexOf（'L'）;
var Cidx = path.slice（Lidx）.indexOf（'C'）;
var PCidx = path.slice（0，Lidx）.lastIndexOf（'C'）;
var lp = path.substr（PCidx，Lidx-PCidx）;
var ss = path.substr（Lidx，Cidx）;
return（path.slice（0，Lidx）+ lp + ss + path.slice（Lidx））;
}
//输入
svg.selectAll（path）
.data（layers.reverse（））
.enter append（path）
.attr（d，function（d）{
return fixPath（area（d.layer））;
}）
.style fill，function（d）{return d.color;}）;
//更新
d3.selectAll（path）
.data（layers）
.transition（）
.duration（2000）
.attr（d，function（d）{return fixPath（area（d.layer））;}）;
}
解决方案
将区域定义中的x更改为y和y更改为x：
var area = d3.svg.area .interpolate（basis）* /
.y（function（d）{return x（dx）;}）
.x0（function（d）{return y（null）;}）
.x1（function（d）{return y（d.y0 + dy）;}）;
完成示例此处。
I'm new in D3, so my question probably is pretty simple, but for me it's a big problem right now.
Question:
How to make Streamgraph vertically? my JSFiddle
I have this:
I should have this:
JS
var dataMetric = [
{
"id": 1,
"title": "Little Inc",
"metrics": {
"offers": 665,
"shares": 20,
"landings": 1124,
"leads": 1102,
"purchases": 88,
"friends": 74
}
},
{
"id": 2,
"title": "Marvin LLC",
"metrics": {
"offers": 20,
"shares": 2,
"landings": 20,
"leads": 25,
"purchases": 28,
"friends": 18
}
},
{
"id": 3,
"title": "Hodkiewicz, Jacobson and O'Conner",
"metrics": {
"offers": 834,
"shares": 8,
"landings": 759,
"leads": 683,
"purchases": 41,
"friends": 35
}
},
{
"id": 4,
"title": "Harber, Fahey and Berge",
"metrics": {
"offers": 233,
"shares": 5,
"landings": 352,
"leads": 348,
"purchases": 31,
"friends": 25
}
}
];
var metrics = ["offers", "shares", "landings", "leads", "purchases", "friends"];
var width = 500,
height = 200,
colors = {'0': '#6ff500', '1': '#ffad0a', '2': '#f90035', '3': '#6fD000'},
stack = d3.layout.stack().offset("expand");
var svg = d3.select("#timeline").append("svg")
.attr("width", width)
.attr("height", height);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var color = d3.scale.linear()
.range(["#0D0", "#060"]);
streamed_history(dataMetric)
function streamed_history(data) {
var m = [];
data_array = metrics.forEach(function (f, metricIndex) {
for (var index in data) {
m[index] = m[index] || [];
m[index].push({x: metricIndex, y:data[index].metrics[f]});
}
})
layers = stack(m)
console.log(m)
layers = dataMetric.map(function (f, i) {
return {layer: layers[i], companyName: f.title, color: color(i/(dataMetric.length -1))}
})
var x = d3.scale.linear()
.domain([0, metrics.length - 1])
.range([0, width]);
var area = d3.svg.area()/*.interpolate("basis")*/
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(null); })
.y1(function(d) { return y(d.y0 + d.y); });
function fixPath (path) {
var Lidx = path.indexOf('L');
var Cidx = path.slice(Lidx).indexOf('C');
var PCidx = path.slice(0,Lidx).lastIndexOf('C');
var lp = path.substr(PCidx, Lidx-PCidx);
var ss = path.substr(Lidx, Cidx);
return (path.slice(0,Lidx) + lp + ss + path.slice(Lidx));
}
//enter
svg.selectAll("path")
.data(layers.reverse())
.enter().append("path")
.attr("d", function (d) {
return fixPath(area(d.layer));
})
.style("fill", function(d) { return d.color; });
//update
d3.selectAll("path")
.data(layers)
.transition()
.duration(2000)
.attr("d", function (d) {return fixPath(area(d.layer));});
}
解决方案
All you need to do is change the x to y and y to x in your area definition:
var area = d3.svg.area()/*.interpolate("basis")*/
.y(function(d) { return x(d.x); })
.x0(function(d) { return y(null); })
.x1(function(d) { return y(d.y0 + d.y); });
Complete example here.
这篇关于如何使D3 Streamgraph垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
