D3 tick marks on integers values

xAxis().ticks(4) //.tickFormat(d3.format("d")); // <---- Remove the labels but not the ticks

by Patrick Brockmann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.5/crossfilter.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
<div id="topics-array-rows"></div>
<div id="medium-array-rows"></div>
<div id="states-rows"></div>

JavaScript

// https://stackoverflow.com/questions/13576906/d3-tick-marks-on-integers-only

//  .xAxis().ticks(4)
//  .tickFormat(d3.format("d")); // <---- Remove the labels but not the ticks

// Solution
//      .on("preRedraw", function(chart) {
//        var maxTick = chart.group().top(1)[0].value;
//        if (maxTick < 4) {
//          chart.xAxis().ticks(maxTick);
//        } else {
//          chart.xAxis().ticks(4);


    
    var data = [{
        "key": "KEY-1",
        "state": "CA",
        "topics": ["Technology", "Science", "Automotive"],
        "medium": ["paper", "web"]
      },
      {
        "key": "KEY-2",
        "state": "CA",
        "topics": ["Health"],
        "medium": ["paper"]
      },
      {
        "key": "KEY-3",
        "state": "OR",
        "topics": ["Science"],
        "medium": ["web"]
      },
      {
        "key": "KEY-4",
        "state": "WA",
        "topics": ["Automotive", "Science"],
        "medium": ["web"]
      },
      {
        "key": "KEY-5",
        "state": "WA",
        "topics": ["Science"],
        "medium": ["tv"]
      },
      {
        "key": "KEY-6",
        "state": "WA",
        "topics": ["Health"],
        "medium": ["tv"]
      },
      {
        "key": "KEY-7",
        "state": "CA",
        "topics": ["Technology", "Science", "Automotive"],
        "medium": ["paper", "web"]
      },
      {
        "key": "KEY-8",
        "state": "OR",
        "topics": [ "Science", "Health"],
        "medium": ["web", "tv"]
      },
      {
        "key": "KEY-9",
        "state": "OR",
        "topics": [ "Science", "Technology"],
        "medium": ["paper", "tv"]
      },
    ];

    var cf = crossfilter(data);

    // tell crossfilter that this dimension isArray=true
    var topicsDim = cf.dimension(function(d) {
      return d.topics;
    }, true);
    var topicsGroup = topicsDim.group();

    function controlTicks() {
      var maxTick = Targeted_phylum_Group.top(1)[0].value;
      //console.log(maxTick);
     ...