d3.jsを使ってエリアプロットに色とグリッドを設定する方法は？

私は次のコードを持っている：私は、グリッドを設定しており、色はこの絵と同じに見えるようにd3.jsを使ってエリアプロットに色とグリッドを設定する方法は？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>areaplot</title> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
     <style> 
      svg { border: 1px solid #dedede; } 

      .axis path, .axis line { 
       fill: none; 
       stroke: #000; 
       shape-rendering: crispEdges; 
      } 

      .area { fill: skyblue; } 
     </style>  
    </head> 
    <body> 
     <svg id="area" /> 
     <script> 
      d3.csv("performance.csv", function (error, data) { 

       data.forEach(function (d) { 
        d.stocks = +d.stocks; 
       }); 
       var margin = {top: 20, right: 20, bottom: 40, left: 50}, 
       width = 575 - margin.left - margin.right, 
         height = 350 - margin.top - margin.bottom; 
       var x = d3.scale.linear() 
         .domain([d3.min(data, function (d) { 
           return d.percentage; 
          }), d3.min(data, function (d) { 
           return d.percentage; 
          })]) 
         .range([0, width]); 

       var y = d3.scale.linear() 
         .domain([0, d3.max(data, function (d) { 
           return d.stocks; 
          })]) 
         .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.percentage); 
         }) 
         .y0(height) 
         .y1(function (d) { 
          return y(d.stocks); 
         }); 
       var svg = d3.select("svg#area") 
         .attr("width", width + margin.left + margin.right) 
         .attr("height", height + margin.top + margin.bottom) 
         .append("g") 
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
       svg.append("path") 
         .datum(data) 
         .attr("class", "area") 
         .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); 

      }); 


     </script> 
    </body> 
</html>

を：

私のCSVファイルには、以下のデータが含まれています。

stocks,percentage 
400,100 
300,75 
200,70 
100,50 
75,20

グリッドを追加してd3を使用して色を設定するにはどうすればよいですか？

出典

2016-06-01 Sai Rajesh

これは線形グラデーションを使用して実現できます。エリアパス上

var gradient = d3.select("svg").append("defs") 
    .append("linearGradient") 
    .attr("id", "gradient") 
    .attr("spreadMethod", "pad"); 
    //start color white 
    gradient.append("stop") 
    .attr("offset", "0%") 
    .attr("stop-color", "white") 
    .attr("stop-opacity", 1); 
    //end color steel blue 
    gradient.append("stop") 
    .attr("offset", "90%") 
    .attr("stop-color", "steelblue") 
    .attr("stop-opacity", 1);

：

svg.append("path") 
    .datum(data) 
    .style("fill", "url(#gradient)")//set the fill to the gradient id created above. 
    .attr("d", area);

の作業コードhere

出典

2016-06-01 10:23:06 Cyril

屋you..iに感謝グリッドを追加する必要が上の写真 –

SRYとしてアンディ軸が同じX私は正確にそれを作るカントが、ここで私の試行ですhttp://plnkr.co/edit/NbV2eikcLbA9r5eWamBI?p=preview – Cyril

ありがとう... –

d3.jsを使ってエリアプロットに色とグリッドを設定する方法は？

答えて

関連する問題