Only end tick mark is showing on dc.js bubble chart

Question

I have the following bubble chart coded with dc.js which is built upon d3.js.

All is good, but for some reason I cannot see the tick marks. When I inspect the DOM I can see that they are present:

<line y2="6" x2="0"></line>

And I have applied CSS styles to them, but still they do not show!

#referrals-bubble-chart .axis .tick line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

I even added a stroke-width of 2px and still nothing shows! I know I'm targeting the right elements in my CSS because when I give it a stroke width of 10px and hover (Chrome Inspector), I see that the line is now 10px wide.

Why is this happening? Chart Code is below:

// define the referrals bubble chart attributes
referralsChart
  .width(700)
  .height(400)
  .transitionDuration(1500) // (optional) define chart transition duration, :default = 750
  .margins({top: 10, right: 50, bottom: 40, left: 50})
  .dimension(diagnosisDimension)
  //Bubble chart expect the groups are reduced to multiple values which would then be used
  //to generate x, y, and radius for each key (bubble) in the group
  .group(diagnosisDimensionGroup)
  .colors(colorbrewer.RdYlGn[9]) // (optional) define color function or array for bubbles
  .colorDomain([0, 100]) //(optional) define color domain to match your data domain if you want to bind data or color
  .colorAccessor(function (d) {
    // color - mapped to internal scale
    return d.value.cost % 100;
  })
  .keyAccessor(function (p) {
    // x-axis
    return p.value.avgrtt / p.value.referrals;
  })
  .valueAccessor(function (p) {
    // y-axis
    return p.value.cost / 1000;
  })
  .radiusValueAccessor(function (p) {
    // radius size - default is [0, 100]
    return p.value.referrals;
  })
  .maxBubbleRelativeSize(0.1)
  // .x(d3.scale.linear().domain([0, 5000]))
  .x(d3.scale.linear().domain([1, 15]))
  .y(d3.scale.linear().domain([1000, 10000]))
  .r(d3.scale.linear().domain([0, 4000]))
  //##### Elastic Scaling
  //`.elasticX` and `.elasticX` determine whether the chart should rescale each axis to fit data.
  //The `.yAxisPadding` and `.xAxisPadding` add padding to data above and below their max values in the same unit domains as the Accessors.
  .elasticY(true)
  .elasticX(false)
  .yAxisPadding(200)
  .xAxisLabel('Average Waiting Time - (weeks)') // (optional) render an axis label below the x axis
  .yAxisLabel('Cost - (£1K)') // (optional) render a vertical axis lable left of the y axis
  //#### Labels and  Titles
  //Labels are displaed on the chart for each bubble. Titles displayed on mouseover.
  .renderLabel(true) // (optional) whether chart should render labels, :default = true
  .label(function (p) {
    return p.key;
  })
  .renderTitle(true) // (optional) whether chart should render titles, :default = false
  .title(function (p) {
      return [p.key,
             "Referrals: " + p.value.referrals,
             "Cost: £" + p.value.cost,
             "RTT: " + p.value.avgrtt / p.value.referrals + " weeks"]
             .join("\n");
  })
  //#### Customize Axis
  //Set a custom tick format. Note `.yAxis()` returns an axis object, so any additional method chaining applies to the axis, not the chart.
  .yAxis().tickFormat(function (v) {
      return v;
  });

Answer 1

As mentioned in the comments, it's hard to help you without a complete example, but this works for me. Since I don't have your data I made my own very simple data and adjusted a few things on my bubble chart.

var data = [];

for (var i = 1; i < 10; i++) {
  data.push({
    val: i
  });
}

var ndx = crossfilter(data);

var dim = ndx.dimension(function(d) {
  return d.val;
});

var group = dim.group().reduceSum(function(d) {
  return d.val;
});

bubbleChart = dc.bubbleChart("#bubbleChart");

bubbleChart
 .width(700)
 .height(400)
 .transitionDuration(1500)
 .margins({top: 10, right: 50, bottom: 40, left: 50})
 .dimension(dim)
 .group(group)
 .keyAccessor(function (p) {
   return p.value;
 })
 .valueAccessor(function (p) {
   return p.value;
 })
.maxBubbleRelativeSize(0.1)
.x(d3.scale.linear().domain([-1, 10]))
.y(d3.scale.linear().domain([0, 10]))
.radiusValueAccessor(function (p) {
  return p.value;
 })
.r(d3.scale.linear().domain([0, 100]))
.elasticY(true)
.elasticX(false)
.yAxisPadding(200)
.xAxisLabel('Average Waiting Time - (weeks)')
.yAxisLabel('Cost - (£1K)')
.renderLabel(true)
.label(function (p) {
  return p.key;
})
.renderTitle(true)
.title(function (p) {
  return "This is the title";
})
.yAxis().tickFormat(function (v) {
  return v;
});

dc.renderAll();