在堆叠区域图表上创建圆圈
Create circles on Stacked Area chart
我想在堆叠面积图表上添加圆圈,比如http://nvd3.org/examples/stackedArea.html,使用这个例子:http://bl.ocks.org/mbostock/3020685
var stack = d3.layout.stack()
.offset("zero")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var layers = stack(nest.entries(data));
svg.selectAll("circle")
.data(layers)
.enter().append('circle')
.attr('cx', function (d, i) { return x(d.values[i].value); })
.attr('cy', function (d, i) { return y(d.values[i].date); })
.attr('r', 10);
当然,图表上没有圆圈,我很确定cy
和cx
的值是不正确的,但我就是不能算出来。
数据如下:
key,value,date
Group1,37,04/23/12
Group2,12,04/23/12
Group3,46,04/23/12
Group1,32,04/24/12
Group2,19,04/24/12
Group3,42,04/24/12
Group1,45,04/25/12
Group2,16,04/25/12
Group3,44,04/25/12
Group1,24,04/26/12
Group2,52,04/26/12
Group3,64,04/26/12
:好吧,过了一段时间我才明白:
svg.selectAll("circle")
.data(data)
.enter().append('circle')
.attr('cx', function (d, i) { return x(d.date); })
.attr('cy', function (d, i) { return y(d.y0 + d.y); })
只是为了好玩…
d3.csv("https://rawgit.com/cool-Blue/SO-Questions/master/stack/data.csv",function(data){
var size = {width: 500, height: 180},
light = [0,0,1,0.2],
svg = d3.select("body").append("svg").attr(size)
.on("mousemove", function() {
var m = d3.mouse(svg.node()).map(function(d, i){
var side = [size.width, size.height][i];
return d / side
}),
m1 = m.map(Math.round),
m2 = [(m[0] % 0.5)*2, (m[1] % 0.5)*2];
cat10.copy().range(cat10.range().map(filters.FlatShade.bind(null, svg, [m1[0],m1[1],m2[0],m2[1]])));
console.log([m.map(f), [m1[0],m2[0]].map(f),[m1[1],m2[1]].map(f)].join("'t"))
function f(x){return d3.format(" >6.3f")(x)}
}),
x = d3.time.scale()
.domain(["04/23/12", "04/26/12"].map(function(d){
return new Date(d)
}))
.range([0,size.width]),
y = d3.scale.linear()
.range([size.height, 0]),
r = d3.scale.linear()
.range([0, size.height]),
cat10 = d3.scale.category10(),
color = cat10.copy().range(cat10.range().map(filters.FlatShade.bind(null, svg, light)));
data.forEach(function(d){
d.date = new Date(d.date);
d.value = +d.value
});
var stack = d3.layout.stack()
.offset("wiggle")
.order("inside-out")
.values(function(d) { return d.values; })
.x(function(d) {
return d.date;
})
.y(function(d) {
return +d.value;
});
var nest = d3.nest()
.key(function(d) { return d.key; });
var layers = stack(nest.entries(data));
var monthHeights = layers.map(function(g){return d3.max(g.values, function(d){return d.y0 + d.y} )}),
maxMonth = d3.max(monthHeights);
y.domain([0, maxMonth]);
r.domain(y.domain());
x.range(x.range().map(function(d, i){return d + [maxMonth/2, -maxMonth/2][i]}));
color.domain(layers.map(function(o){return o.key}));
var layerGroups = svg.selectAll("circles")
.data(layers)
.enter().append('g')
.attr({"class": "layer", "mix-blend-mode": "normal"}),
areas = d3.svg.area()
.x(function(d){
return x(d.date)
})
.y0(function(d){
return y(d.y0)
})
.y1(function(d){
return y(d.y0 + d.y)
})
.interpolate("cardinal"),
bands = layerGroups.selectAll("path")
.data(function(d){
return [d.values]
})
.enter().append("path")
.attr({
"d": function(d) {
return areas(d)
},
opacity: 0.5,
stroke: function(d){
return color(d[0].key)
},
// "stroke-width": 6,
fill: function(d){
return color(d[0].key)
}
}),
circles = layerGroups.selectAll(".circle")
.data(function(d){
return d.values
})
.enter().append("ellipse")
.attr({
class: "circle",
'cx': function (d, i) {
return x(d.date);
},
'cy': function (d, i) {
return y(d.y0 + d.y/2);
},
'ry': function (d, i) {
return r(d.value/2);
},
'rx': function (d, i) {
return r(d.value/4);
},
"fill": function(d){
return color(d.key)
},
// "mix-blend-mode": "normal"
})
})
body{margin:0;}
svg{outline:solid 1px #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script src="https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/filters/shadow.js"></script>
相关文章:
- onkeyup无法动态创建多个文本区域
- 如何为高图中的区域线创建z索引
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 如何在sap.m.Image元素上创建可点击区域
- 在文本输入区域中创建双向更新
- 使用不同的日期格式和区域设置创建时刻
- 如何在不使用iframe或库的情况下创建剪切显示窗口区域
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- 设置焦点动态创建的文本区域
- 在提交之前创建文本区域预览
- 在文本区域(密文器)中创建自动分页符
- 如何创建具有滚动背景图像的可滚动文本区域
- 创建选项卡,每个选项卡有两个文本区域
- 如何根据电子邮件模板名称的选择创建依赖的同义词文本区域
- 无法检索动态创建的文本区域 jquery 的文本
- 可以't将通过Javascript创建的画布指定为放置区域
- 使用php创建的下拉列表中的选择单独填充文本区域
- 无法使用javascript创建文本区域
- 如何在单击区域 HREF 标签时创建活动事件(更改 BG 或创建边框)