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宽。< / p>

为什么会这样？图表代码如下：

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