Javascript 在dc.js气泡图上按x轴按月打印日期

花点时间检查下面的气泡图。这是我在Illustrator中创建的图像。我现在尝试用复制气泡图

通过剖析上给出的示例图的代码，我试图实现上述目标。这是我的密码：

'use strict'

// define bubble chart and get a handle
var referralsChart = dc.bubbleChart('#referrals-bubble-chart');

// load the csv data
d3.csv("data/data.csv", function (data) {
    /* since its a csv file we need to format the data a bit */
    var dateFormat   = d3.time.format("%d/%m/%Y");
    var numberFormat = d3.format(".2f");

    data.forEach(function (d) {
        d.dd    = dateFormat.parse(d.date);
    });

    // create cross-filter dimensions and groups
    // see the crossfilter api at (https://github.com/square/crossfilter/wiki/API-Reference) for reference.
    var referralsChartXFilter = crossfilter(data);
    var referralsChartXGroups = referralsChartXFilter.groupAll();

    // dimension by full date
    var dateDimension = referralsChartXFilter.dimension(function (d) {
        return d.dd.getMonth();
    });

    var diagnosisDimension = referralsChartXFilter.dimension(function (d) {
        return d.referredfor;
    });

    // dimension group
    var diagnosisDimensionGroup = diagnosisDimension.group();

    // 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: 30, left: 40})
      .dimension(dateDimension)
      //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
      //##### Accessors
      //Accessor functions are applied to each value returned by the grouping
      //
      //* `.colorAccessor` The returned value will be mapped to an internal scale to determine a fill color
      //* `.keyAccessor` Identifies the `X` value that will be applied against the `.x()` to identify pixel location
      //* `.valueAccessor` Identifies the `Y` value that will be applied agains the `.y()` to identify pixel location
      //* `.radiusValueAccessor` Identifies the value that will be applied agains the `.r()` determine radius size, by default this maps linearly to [0,100]
      .colorAccessor(function (d) {
        return d.value / 100
      })
      .keyAccessor(function (p) {
        return p.value
      })
      .valueAccessor(function (p) {
        return p.value
      })
      .radiusValueAccessor(function (p) {
        return p.value
      })
      .maxBubbleRelativeSize(0.1)
      .x(d3.scale.linear().domain([0, 5000]))
      .y(d3.scale.linear().domain([0, 5000]))
      .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(true)
      .yAxisPadding(100)
      .xAxisPadding(500)
      .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
      .renderVerticalGridLines(true) // (optional) render vertical grid lines, :default=false
      .xAxisLabel('Date') // (optional) render an axis label below the x axis
      .yAxisLabel('Referrals') // (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: " + numberFormat(p.value.absGain),
                 "Index Gain in Percentage: " + numberFormat(p.value.percentageGain) + "%",
                 "Fluctuation / Index Ratio: " + numberFormat(p.value.fluctuationPercentage) + "%"]
                 .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 + "%";
      });

      dc.renderAll();
});

上面的代码的工作原理是我绘制了气泡，但是x轴和y轴显示了错误的比例。下面是我使用上述代码得到的屏幕截图：

我想要的是根据x轴（1月、2月、3月……等）和y轴绘制每个月的日期，以及转诊的数据范围

正在传递的csv数据可以是

我知道我需要编辑下面的两行，但我不确定如何将数据传递给它们

  .x(d3.scale.linear().domain([0, 5000]))
  .y(d3.scale.linear().domain([0, 5000]))
  .r(d3.scale.linear().domain([0, 4000]))

---

您需要将

.x

设置为d3.time.scale

看起来您还需要设置

.r

以反映您的数据

此外，您可能不需要设置缩放对象的

.domain

，因为您使用的是

.elasticX

和

.elasticY

，这将自动设置它们

您可能还需要类似的

.elasticRadius

根据当前值调整气泡的大小