내 d3 차트에 수직 그리드 선을 추가하는 방법

Question

내가 뭘 잘못하고 있는지 알고 싶습니다. 나는 3DJS V4에서 눈금 선을 만드는 것에 대한 튜토리얼 (Vertical gridSimple gridlines in d3js v4)을 따라 갔고, 나는 내 자신의 코드와 결합하려고 시도했다.

내 차트는 다음과 같습니다 내가 차트를 쉽게 읽을 수있을 것입니다, 그래서 SVG의 일부 수직 그리드 라인을 가지고 싶습니다 그러나

.

내 코드 :

function makeChart(desktopData,mobileData,tabletData){ 
    console.log(desktopData); 
    var WIDTH = 1200, 
     HEIGHT = 300, 
     MARGINS = { 
       top:20, 
      right:20, 
      bottom:20, 
      left:50 
     } 
    var vis = d3.select("#visualisation"), 
     WIDTH = 1200, 
     HEIGHT = 300, 
     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,100]), 

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


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

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

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

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

    vis.append('svg:path') 
     .attr('d', lineGen(desktopData)) 
     .attr('stroke','deepskyblue') 
     .attr('stroke-width',2) 
     .attr('fill','none'); 

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

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



// gridlines in y axis function 
    function make_y_gridlines() { 
     return d3.svg.axis(yScale) 
    } 

    // add the Y gridlines 
    vis.append("g") 
     .attr("class", "grid") 
     .call(make_y_gridlines() 
      .tickSize(-WIDTH) 
      .tickFormat("") 
     ) 

} 

내 CSS : 나는 당신의 .grid path{stroke-width:0;} 읽어야 당신의 CSS에서하지 틀리지 경우

.grid line { 
    stroke: lightgrey; 
    stroke-opacity: 0.7; 
    shape-rendering: crispEdges; 
} 

.grid path { 
    stroke-width: 0; 
} 

Answer 1

이 .grid path{stroke-width:0.5;} 0.5이 될 수 적 번호를 싶습니다. 획 폭이 0이면 효과적으로 선이 제거됩니다.