D3JS背景線図

Question

私は間違っているかもしれませんが、線の下に背景（イメージまたは色）を作成できるかどうか疑問に思っていました。次のようなイメージを作りたいと思います。

をしかし、これは、私は（色を気にしない）などを見て、それを想像する方法である：私はチャートを作成している

は、例えば、データを次のようになります。

あなたはareaでそれを行うことができますjsFiddle

var svg,lineGen; 

    makeChart(); 
    function makeChart(){ 
    // example data 
    mobileData = [ 
    { "uur" : "00", "pageviews":"20"}, 
    { "uur" : "01", "pageviews":"26"}, 
    { "uur" : "02", "pageviews":"10"}, 
    { "uur" : "03", "pageviews":"30"}, 
    { "uur" : "04", "pageviews":"40"}, 
    { "uur" : "05", "pageviews":"50"}, 
    ] 

    tabletData = [ 
    { "uur" : "00", "pageviews":"50"}, 
    { "uur" : "01", "pageviews":"20"}, 
    { "uur" : "02", "pageviews":"10"}, 
    { "uur" : "03", "pageviews":"35"}, 
    { "uur" : "04", "pageviews":"45"}, 
    { "uur" : "05", "pageviews":"10"}, 
    ] 

     var WIDTH = 1200, 
      HEIGHT = 200, 
      MARGINS = { 
        top:20, 
       right:20, 
       bottom:20, 
       left:50 
      } 
     svg = d3.select("#visualisation"), 
      WIDTH = 1200, 
      HEIGHT = 200, 
      MARGINS = { 
       top: 20, 
       right: 20, 
       bottom: 20, 
       left: 50 
      }, 
      xScale = d3.scale.linear().range([MARGINS.left,WIDTH-MARGINS.right]).domain([00,23]), 

      yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,50]), 

      xAxis = d3.svg.axis() 
       .scale(xScale) 
       .ticks(24) 

      yAxis = d3.svg.axis() 
       .scale(yScale) 
       .ticks(10) 
       .tickPadding(20) 
       .orient("left"); 

     svg.append("svg:g") 
      .attr("class","axis") 
      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
      .call(xAxis); 

     svg.append("svg:g") 
      .attr("class","axis axis-y") 
      .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
      .call(yAxis); 

     lineGen = d3.svg.line() 
      .x(function(d){ 
       return xScale(d.uur); 
      }) 
      .y(function(d){ 
       return yScale(d.pageviews); 
      }); 

     svg.append('svg:path') 
      .attr('d', lineGen(mobileData)) 
      .attr('stroke','orange') 
      .attr('stroke-width',2) 
      .attr('fill','none'); 

     svg.append('svg:path') 
      .attr('d', lineGen(tabletData)) 
      .attr('stroke','deeppink') 
      .attr('stroke-width',2) 
      .attr('fill','none'); 
    } 

Answer 1

を参照してください。ただ、このコードを追加します。

var area = d3.svg.area() 
    .x(function(d) { return xScale(d.uur); }) 
    .y(function(d) { return yScale(d.pageviews); }) 
    .y1(function(d) { return HEIGHT - MARGINS.bottom }); 

svg.append("path") 
    .attr("fill", "yellow") 
    .attr("d", area(mobileData)); 

を私はあなたのフィドル、check it in actionをフォーク。