Prawidłowy sposób rysowania linii siatki

Question

Dobra, zaczynam poznawać nieco D3, ale wciąż mam pewne wątpliwości. Teraz próbuję narysować linie siatki, ale zdaję sobie sprawę, że mogę się odhakować, zamiast robić to poprawnie. Próbowałem dodać kilka linii siatki, używając samouczka, ale skończyło się na tym, że mam sporo kodu, który wydaje się być olimpisem jimmy, aby poprawnie ustawić linię. Zastanawiam się, czy ktoś mógłby wskazać mi na lepszy sposób napisania tego ...

Oryginalny kod to.

 <script type="text/javascript"> 

      //Width and height 
      var w = 800; 
      var h = 400; 
      var padding = 20; 
      var border=1; 
      var bordercolor='black'; 


      var dataset = [ 
          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45], 
          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, -467], [3,-90],[468,481] 
          ]; 

       // create scale functions 
       var xScale = d3.scale.linear() 
           .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]) 
           .range([padding, w - padding * 2]); 

      var yScale = d3.scale.linear() 
           .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })]) 
           .range([h - padding, padding]); 

       var rScale = d3.scale.linear() 
       .domain( [-100,  d3.max(dataset, function(d) { return d[1];   })] ) 
       .range([2,5]); 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h) 
         .attr("border",border) 
         ; 

      //define X axis this is rly a function, remember, variables can hold functions in JS 
       var xAxis = d3.svg.axis() 
         .scale(xScale) 
         .orient("bottom") 
         .ticks(1) 
         .tickSize(-h, 0, 0) 
         ; //Set rough # of ticks 


      //Define Y axis 
       var yAxis = d3.svg.axis() 
         .scale(yScale) 
         .orient("left") 
         .ticks(1) 
         .tickSize(-w, 0, 0) 
         ; 




       //create the circles 
      svg.selectAll("circle") 
       .data(dataset) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return xScale(d[0]); 
       }) 
       .attr("cy", function(d) { 
        return yScale(d[1]); 
       }) 
       .attr("r", 3); 





    // draw axes here 
    svg.append("g") 
    .attr("class", "axis") //assign "axis" class 
    .attr("transform", "translate(0," + (h - padding) +")") 
    .call(xAxis); 



     svg.append("g") 
    .attr("class", "axis") //assign "axis" class 
    .attr("transform", "translate(" + padding + ",0)"  ) 
    .call(yAxis); 
// end draw axes here 
     </script> 

a kod dodałem w drugim linku jest tutaj

var vis = svg.append("svg:g") 
    .attr("transform", "translate(20,0)") 


var rules = vis.append("svg:g").classed("rules", true) 


rules.append("svg:g").classed("grid x_grid", true) 
    .attr("transform", "translate(-20,"+h+")") 
    .call(d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom") 
     .ticks(4) 
     .tickSize(-h,0,0) 
     .tickFormat("") 
    ) 

rules.append("svg:g").classed("grid y_grid", true) 
    .call(d3.svg.axis() 
     .scale(yScale) 
     .orient("left") 
     .ticks(5) 
     .tickSize(-w,0,0) 
     .tickFormat("") 
    ) 

rules.append("svg:g").classed("labels x_labels", true) 
    .attr("transform", "translate(-20,"+ h +")") 
    .call(d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom") 
     .ticks(4) 
     .tickSize(0) 
      .tickFormat("") 
     // .tickFormat(d3.time.format("%Y/%m")) 
    ) 

rules.append("svg:g").classed("labels y_labels", true) 
    .call(d3.svg.axis() 
     .scale(yScale) 
     .orient("left") 
     .ticks(5) 
     .tickSubdivide(1) 
     .tickSize(0, 0, 0) 
      .tickFormat("") 
    ) 

Ponownie, naprawdę wdzięczni za każdą pomoc

Answer 1

Można użyć funkcji ticks() swojej skali, aby uzyskać wartości podziałki i następnie użyj ich w połączeniu danych, aby narysować linie.

var ticks = xScale.ticks(4); 
rules.selectAll("path.xgrid").data(ticks).enter() 
    .append("path") 
    .attr("d", function(d) { 
     return "M" + xScale(d) + " " + padding + "L" + xScale(d) + " " + (h-padding); 
    }); 

Możesz preferować użycie linii do linii siatki, zamiast tworzyć ścieżkę ręcznie. Działa to podobnie dla linii siatki y, tylko że współrzędna y jest stała i mieści się w zakresie od 0 do szerokości wykresu. Konieczne może być dostosowanie wartości początkowej i końcowej, aby wyglądały "ładnie".

Ostatnie pytanie

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Powiązane problemy

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.