如何在d3区域图表中叠加颜色

时间:2015-12-23 18:02:54

标签: d3.js data-visualization

我正在制作像http://bl.ocks.org/mbostock/3883195这样的区域图表,我希望在其上有一个额外的功能。我希望根据高度或其他变量有不同的颜色。有没有办法可以做到这一点?

def main():
   print(sys.argv)
   cat(sys.argv[2])

2 个答案:

答案 0 :(得分:4)

首先,您需要制作数据块。

此处制作数据集块的标准是使用field close(即任何data.close> 150)

  var bucket = [];
  var prev = undefined;
  var datanew = [];
  data.forEach(function(d){
     if (d.close > 150){
       if (prev && prev.close < 150){
         datanew.push(bucket);
         bucket = [];
       }
       bucket.push(d);
     } else {
       if (prev && prev.close > 150){
         datanew.push(bucket);
         bucket = [];
       }
       bucket.push(d);
     }
     prev = d;
  });
  datanew.push(bucket); //datanew will hold the chunk of data with close > 150.

在当前数据集中,它将生成8个块。

  1. Chunk1(数据集&gt; 150)
  2. Chunk2(数据集&lt; 150)
  3. Chunk3(数据集&gt; 150)
  4. ..等等

    现在在制作路径时:

     datanew.forEach(function(d){//iterate through the chunks
            console.log(d)
            if (d[0].close>150)
              c = "red";//less than 150 so make it red as this chunk is for less than 150
            else 
              c="blue";//greater than 150 so make it blue as this chunk is for greater than 150
            svg.append("path")
              .datum(d)
              .attr("class", "area")
              .attr("stroke", c)//color selected above
              .style("fill", c)
              .attr("d", area);
          });
    

    这里的完整工作代码

    &#13;
    &#13;
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var parseDate = d3.time.format("%d-%b-%y").parse;
    
    var x = d3.time.scale()
        .range([0, width]);
    
    var y = d3.scale.linear()
        .range([height, 0]);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    
    var area = d3.svg.area()
        .x(function(d) { return x(d.date); })
        .y0(height)
        .y1(function(d) { return y(d.close); });
    
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    d3.tsv("https://gist.githubusercontent.com/cyrilcherian/6baf8967e3fceaa4fec1/raw/02ab25f4b7956b86be41523932da434529377fdb/data.tsv", function(error, data) {
      if (error) throw error;
    
      data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
      });
    
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.close; })]);
    
      var bucket = [];
      var prev = undefined;
      var datanew = [];
      data.forEach(function(d){
         if (d.close > 150){
           if (prev && prev.close < 150){
             datanew.push(bucket);
             bucket = [];
           }
           bucket.push(d);
         } else {
           if (prev && prev.close > 150){
             datanew.push(bucket);
             bucket = [];
           }
           bucket.push(d);
         }
         prev = d;
      });
      datanew.push(bucket); //datanew will hold the chunk of data with close > 150.
      
      datanew.forEach(function(d){//iterate through the chunks
            console.log(d)
            if (d[0].close>150)
              c = "red";//less than 150 so make it red as this chunk is for less than 150
            else 
              c="blue";//greater than 150 so make it blue as this chunk is for greater than 150
            svg.append("path")
              .datum(d)
              .attr("class", "area")
              .attr("stroke", c)//color selected above
              .style("fill", c)
              .attr("d", area);
          });
    
    
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
    
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Price ($)");
    });
    &#13;
    body {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .area {
      fill: steelblue;
    }
    &#13;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    &#13;
    &#13;
    &#13;

    希望这有帮助!

答案 1 :(得分:0)

渐变填充到区域 请参阅以下内容:http://bl.ocks.org/d3noob/4433087