Показывается только маркерная метка dc.js

Question

У меня есть следующая диаграмма, закодированная в dc.js, которая построена по адресу d3.js.

Все это хорошо, но по какой-то причине я не могу увидеть засечек. Когда я инспектировать DOM я могу видеть, что они присутствуют:

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

И я применил стили CSS к ним, но до сих пор они не показывают!

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

Я даже добавил stroke-width из 2px и до сих пор ничего не показывает! Я знаю, что я нацелен на правильные элементы в моем CSS, потому что, когда я даю ему ширину штриха 10px и наведите курсор (Chrome Inspector), я вижу, что линия теперь 10px.

Почему это происходит? Код диаграммы ниже:

// 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

Как уже упоминалось в комментариях, вам нелегко помочь без полного примера, но это работает для меня. Поскольку у меня нет данных, я сделал свои очень простые данные и скорректировал несколько вещей на моей диаграмме пузырьков.

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();