D3 streamgraph 층 페이드 기능

Question

는 최근이 Streamgraph http://bl.ocks.org/1963983을 발견했다.

광산은 분명히 그 예보다 상당히 복잡하지 않습니다. 조언이나 제안은 대단히 감사하겠습니다!

감사합니다.

 var customPalette = [ 
      "#ff7f0e", "#2ca02c", "#00FFFF", "#d62728", "#9467bd", 
      "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf" 
     ]; 

     var format = d3.time.format("%y"); 

     //creating margins around the graph 
     var margin = {top: 20, right: 30, bottom: 30, left: 200}, 
      width = 1200 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

     //OUTPUT RANGE 
     var x = d3.time.scale() 
      .range([0, width]); 

     //OUTPUT RANGE 
     var y = d3.scale.linear() 
      .range([height, 0]); 

     //assining custom colors to layers 
     var colours = d3.scale.ordinal().range(customPalette); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("top") 
      .ticks(d3.time.years); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     //ctreate stack layout 
     var stack = d3.layout.stack() 
      .offset("wiggle") 
      .order("reverse") 
      .values(function(d) { return d.values; }) 
      .x(function(d) { return d.date; }) 
      .y(function(d) { return d.amount; }); 

     //creates array of datya elements for stacked bar graph 
     var nest = d3.nest() 
      .key(function(d) { return d.age; }); 

     //create area 
     var area = d3.svg.area() 
      //adds curviture 
      .interpolate("monotone") 
      .x(function(d) { return x(d.date); }) 
      .y0(function(d) { return y(d.y0); }) 
      .y1(function(d) { return y(d.y0 + d.y); }); 

     var svg = d3.select("body").append("svg") 
      //defines length of x-axis 
      .attr("width", width + margin.left + margin.right) 
      //defines height of y-axis 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


     d3.csv("data6.csv", function(data) { 
      data.forEach(function(d) { 
      // Convert strings to numbers 
      d.date = format.parse(d.date); 
      d.amount = +d.amount; 
      }); 

      //returns an array of objects with a key feild (0-20yrs....) 
      //and a value array which contains associated records 
      var layers = stack(nest.entries(data)); 

      //.extent() returns min and max values of argument 
      x.domain(d3.extent(data, function(d) { return d.date; })); 
      // 
      y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); 

      svg.selectAll(".layer") 
       .data(layers) 
      .enter().append("path") 
       .attr("class", "layer") 
       .attr("d", function(d) { return area(d.values); }) 
       .style("fill", function(d, i) { return colours(i); }); 


     svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + 0 + ")") 
       .call(xAxis); 

     svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis); 

     }); 

Answer 1

나는 마침내 작업 있어요! 이 편리한 코드를 여기에서 발견했습니다. http://bl.ocks.org/3480186

나는 페이드 효과를 위해 덩어리를 잘라 냈습니다. 매우 기쁘다.

svg.selectAll(".layer").attr("opacity", 1) 
.on("mouseover", function(d, i) { 
    svg.selectAll(".layer").transition() 
     .duration(500) 
     .attr("opacity", function(d, j) { 
     return j != i ? 0.2 : 1; 
     }); 
    d3.select(this) 
    .classed("hover", true); 
}) 
.on("mouseout", function(d, i) { 
    svg.selectAll(".layer") 
    .transition() 
     .duration(500) 
     .attr("opacity", 1); 
    d3.select(this) 
    .classed("hover", false); 
});