D3JS 배경 선 차트

Question

내가 잘못 찾고 있을지 모르지만 줄 아래 배경 (이미지 또는 색상)을 만들 수 있는지 궁금합니다. 아래 이미지로 뭔가를 만들고 싶습니다.

을하지만 내가 (색상 상관 없어)는 같은를보고 그것을 상상하는 방법이다 : 나는 차트를 만든

는 예를 들어 데이터를 다음과 같이 보입니다.

는 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

당신은 area 함께 할 수 있습니다 참조하십시오. 그냥이 코드를 추가

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 갈래.