创建堆积面积图上圈

Question

我想添加一个堆叠面积图上圈，像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 

UPDATE： OK，有时后我想通了：

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); }) 

Answer 1

只是为了好玩...

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>