Haupt Zecken in d3.js

Question

ich einen d3 Diagramm dargestellt, in dem in viele Tage, und diese Tage, von Tag zu Tag erhöht werden, so meine x-Achse mit so vielen DAE grabled sieht so ich große Zecken in meinem Graph n xaxis festlegen möge . Ich habe versucht, aber nicht in der Lage, es zu bekommen. Also bitte vorschlagen. Hier ist mein Code:

<div id="chart"></div> 
    </div> 
    <script> 
    var jsonURL = 'avb.json'; 

    var myData = []; 
    var fliterdata = []; 
    var tempdata = []; 
    var selectop = ""; 
    var selectDate = false; 
    var chartType = chartType || 'bar'; 

    function filterJSON(json, key, value) { 
     var result = []; 
     for (var foo in json) { 
     var extractstr = json[foo][key] ; 
      extractstr=String(extractstr); 

      if (extractstr.slice(3)== value) { 

       result.push(json[foo]); 
      } 
     } 
     return result; 
    } 

    function selectValue(d) { 
     switch (selectop) { //d object select particular value for Y axis 
      case "01": 
       return d.val001; 
       break; 
      case "02": 
       return d.val002; 
       break; 
      default: 
       //console.log("default"); 
       return d.val001; 
     } 
    } 

    var margin = { 
     top: 20, 
     right: 0, 
     bottom: 80, 
     left: 40 
    }; 
    var width = 700 - margin.left - margin.right; 
    var height = 500 - margin.top - margin.bottom; 



    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1); 
    var xAxis = d3.svg.axis() 
    .scale(xScale) 
     .tickValues(xScale.domain().filter(function(d, i) { return !(i % 2);      })) 
    .orient("bottom"); 

    var yScale = d3.scale.linear().range([height, 0]); 
    var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d")); 
    var vAxis = d3.svg.axis().scale(yScale).orient('left'); 
    var tooltip = d3.select('body').append('div') 
     .style('position', 'absolute') 
     .style('background', '#f4f4f4') 
     .style('padding', '5 15px') 
     .style('border', '1px #333 solid') 
     .style('border-radius', '5px') 
     .style('opacity', 'o'); 

    var line = d3.svg.line() 
     .x(function(d) { 
      return xScale(d.date); 
     }) 
     .y(function(d) { 
      return yScale(selectValue(d)); 
     }) 
     .interpolate("monotone") 
     .tension(0.9); 


    function render(filterByDates) { 


     d3.select('svg').remove(); 

     if (filterByDates) { 
      selectDate = true; 
      tempData = fliterdata; 
      console.log("before date fliter data", tempData); 
      var date1 = new Date(document.getElementById('field1').value); 
      var date2 = new Date(document.getElementById('field2').value); 

      tempData = tempData.filter(function(d) { 
       console.log(date1, date2); 
       // alert(date1); 
       return d.date >= date1 && d.date <= date2; 
      }); 
     } 


     xScale.domain(tempData.map(function(d) { 
      return d.date; 
     }).sort(function(a, b) { 
      return a > b; 
     })); 

     yScale.domain([0, d3.max(tempData, function(d) { 
      return +selectValue(d); 
     })]); 

     var svg = d3.select('#chart').append('svg') 
      .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('g') 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(hAxis) 
      .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", "-.55em") 
      .attr("transform", "rotate(-90)"); 

     svg 
      .append('g') 
      .attr("class", "yaxis") 
      .call(vAxis) 

     if (chartType == 'bar') { 
      svg 
       .selectAll(".bar") //makes bar 
       .data(tempData) 
       .enter().append("rect") 
       .attr("class", "bar") 
       .style("fill", "red") 
       .attr("x", function(d) { 
        return xScale(d.date); 
       }).attr("width", xScale.rangeBand()) 
       .attr("y", function(d) { 


        return yScale(selectValue(d)); 
       }).attr("height", function(d) { 

        console.log("as", d.value); 
        return height - yScale(selectValue(d)); 
       }).on('mouseover', function(d) { 
        tooltip.transition() 
         .style('opacity', 1) 

        tooltip.html(d.value) 
         .style('left', (d3.event.pageX) + 'px') 
         .style('top', (d3.event.pagey) + 'px') 
        d3.select(this).style('opacity', 0.5) 
       }).on('mouseout', function(d) { 
        tooltip.transition() 
         .style('opacity', 0) 
        d3.select(this).style('opacity', 1) 
       }); 
     } 

     if (chartType == 'line') { 
      svg.append("path") // Add the line path. 
       .data(tempData) 
       .attr("class", "line") 
       .attr("d", line(tempData)); 
     } 

    } 

    d3.json(jsonURL, function(data) { 

     myData = data; //data from json in mydata 
     myData.forEach(function(d) { 

      d.date = new Date(d.date); 
     }); 

     $("#listbox").on("click", function() { 

      var key = $(this).val(); 
      console.log("key:", key); 
      var value = $('#listbox option:selected').text(); 
      //value = "int" + value; 
      console.log("vaue:", value); 

      selectop = String(key); 

      selectop = selectop.slice(-2); 
      console.log("mydata: ", myData); 
      console.log("selectops:", selectop); 

      fliterdata = filterJSON(myData, key, value); //selected value from user and picks the whole element that contains that attribute 
      tempData = fliterdata; //graph made by temp data 
      if (selectDate) 
       render(true); 
     }); 
    }); 

    function selectChartType(type) { 
     chartType = type; 
     render(true); 
    } 
    </script> 
</body> 
</html> 

{ 
"name": "ABC", 
"date": 1461176704000, 
"attr001": "intSIGN1", 
"val001": "200", 
"attr002": "intSIGN2", 
"val002": "70", 
"attr003": "dt1SIGN3", 
"val003": "57.5", 
"attr004": "intSIGN4", 
"val004": "670", 
"attr005": "strSIGN5", 
"val005": "Traceinvalid" 
}, 

{ "name": "ABC", 
"date": 1459125900000, 
"attr001": "intSIGN1", 
"val001": "500", 
"attr002": "intSIGN2", 
"val002": "70", 
"attr003": "intSIGN3", 
"val003": "100.00", 
"attr004": "intSIGN4", 
"val004": "670", 
"attr005": "strSIGN5", 
"val005": "Traceinvalid" 
}, 




{ "name": "XYZ", 
"date": 145877400000, 
"attr001": "intVISSE1", 
"val001": "100", 
"attr002": "intVISSE2", 
"val002": "7", 
"attr003": "dt1VISSE3", 
"val003": "39.67", 
"attr004": "intVISSE4", 
"val004": "160", 
"attr005": "strSIGN5", 
"val005": "not found" 
}, 

{ "name": "XYZ", 
"date": 1461535200000, 
"attr001": "intVISSE1", 
"val001": "50", 
"attr002": "intVISSE2", 
"val002": "70", 
"attr003": "dt1VISSE3", 
"val003": "300.00", 
"attr004": "intVISSE4", 
"val004": "230", 
    "attr005": "strSIGN5", 
"val005": "found" 
}, 

{ "name": "XYZ", 
"date": 1461384717000, 
"attr001": "intVISSE1", 
"val001": "300", 
"attr002": "intVISSE2", 
"val002": "10", 
"attr003": "dt1VISSE3", 
"val003": "500.00", 
"attr004": "intVISSE4", 
"val004": "350", 
"attr005": "strSIGN5", 
"val005": "not found" }, 

{ "name": "ABC", 
"date": 1459051873000, 
"attr001": "intSIGN1", 
"val001": "300", 
"attr002": "intVISSE2", 
"val002": "10", 
"attr003": "dt1VISSE3", 
"val003": "500.00", 
"attr004": "intVISSE4", 
"val004": "350", 
"attr005": "strSIGN5", 
"val005": "not found" } ] 

Answer 1

Soweit ich

var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);

Sie für jeden eindeutigen Wert in Ihrer Domain eine Skala geben verstehen (in diesem Fall Ihre Reisedaten), weshalb d3 wird nicht in der Lage sein, die Tick-Anzahl in Ihrem Diagramm zu reduzieren. Verwenden Sie

var xScale = d3.time.scale() 

, die Ihnen helfen, mehr Kontrolle über die Ticks und das Format, das Sie erreichen möchten.

Sie können mehr Informationen darüber finden, wie die d3-Zeitskala funktioniert here und Sie können eine Frage mit einem wirklich nice explained answer finden, warum bestimmte Skalen besser für Ihre Daten geeignet sind.

UPDATE:

Wenn Sie eine nette Option

verwenden würde weniger Zecken unter Verwendung eines Ordinalskala wollen

var xAxis = d3.svg.axis() 
.scale(xScale) 
.tickValues(xScale.domain().filter(function(d, i) { return !(i % 2); })) 
.orient("bottom"); 

, wo die Funktionsfilter wird die Zecke Werte Ihrer Achse entscheiden.