Transition method not a function

[jgoley]

Description

I just bumped the version of billboard to the latest and I'm now experiencing an issue with this function:

  ChartInternal.prototype.showTargets = function () {
    var $$ = this;
    var config = $$.config,
        svg = $$.$el.svg;
    svg.selectAll("." + CLASS.target).filter(function (d) {
      return $$.isTargetToShow(d.id);
    }).transition().duration(config.transition_duration).style("opacity", "1");
  };

Steps to check or reproduce

Bumped to version 2.1.3 and now receiving this error in the console:

billboard.esm.js:8852 Uncaught TypeError: svg.selectAll(...).filter(...).transition is not a function
    at ChartInternal.showTargets (billboard.esm.js:8852)

line 8852:

    }).transition().duration(config.transition_duration).style("opacity", "1");

I switched to importing the chart type modules and calling like this:

data: {
  type: spline(),
}   

[netil]

Hi @jgoley, can you provide full reproducible code?

[jgoley]

Thanks @netil

I created an isolated chart with the same config that's throwing the above error and now seeing the error just below the following block

Version of billboard: 2.1.4

Code within the project:

import bb from 'billboard.js'
const config = {
  size: { height: 500, width: 800 },
  padding: {
    left: 60,
    right: 20,
    top: 0,
    bottom: 50
  },
  axis: {
    x: {
      show: true,
      type: 'timeseries',
      padding: 180000000,
      label: {
        text: 'Date',
        position: 'outer-center'
      },
      tick: {
        format: '%b %e',
        text: {
          show: true
        },
        culling: false,
        fit: false,
        values: [
          '2020-08-03T04:00:00.000Z',
          '2020-08-04T04:00:00.000Z',
          '2020-08-05T04:00:00.000Z',
          '2020-08-06T04:00:00.000Z',
          '2020-08-07T04:00:00.000Z',
          '2020-08-08T04:00:00.000Z',
          '2020-08-09T04:00:00.000Z',
          '2020-08-10T04:00:00.000Z',
          '2020-08-11T04:00:00.000Z',
          '2020-08-12T04:00:00.000Z',
          '2020-08-13T04:00:00.000Z',
          '2020-08-14T04:00:00.000Z',
          '2020-08-15T04:00:00.000Z',
          '2020-08-16',
        ],
        rotate: -35,
        multiline: false
      }
    },
    y: {
      show: true,
      min: 0,
      max: 47,
      label: {
        text: 'Title',
        position: 'outer-middle'
      },
      tick: {
        values: [ 0, 24, 47 ]
      }
    }
  },
  legend: { show: false },
  point: { show: true },
  data: {
    columns: [
      [
        'x',
        '2020-08-03',
        '2020-08-04',
        '2020-08-05',
        '2020-08-06',
        '2020-08-07',
        '2020-08-08',
        '2020-08-09',
        '2020-08-10',
        '2020-08-11',
        '2020-08-12',
        '2020-08-13',
        '2020-08-14',
        '2020-08-15',
        '2020-08-16'
      ],
      [ 'total', 42, 47, 45, 37, 36, 36, 34, 35, 38, 37, 38, 32, 30, 29 ],
      [
        'trend_line',
        43.34285714197904,
        42.34505494404584,
        41.347252746112645,
        40.34945054864511,
        39.35164835071191,
        38.353846152778715,
        37.35604395484552,
        36.35824175737798,
        35.360439559444785,
        34.36263736151159,
        33.36483516404405,
        32.367032966110855,
        31.36923076817766,
        30.37142857024446
      ]
    ],
    type: 'spline',
    names: {
      total: 'Title',
      trend_line: 'Trend Line'
    },
    classes: {
      total: 'bb-line',
      trend_line: 'bb-line--dotted-thick'
    },
    types: {
      total: 'bar',
      trend_line: 'spline'
    },
    x: 'x'
  },
  color: {
    pattern: [ '#147BB1', '#2D4571' ]
  },
  line: {
    connectNull: true,
    classes: [
      'bb-line',
      'bb-line--dotted-thick'
    ]
  },
  bindto: document.getElementById('sandbox_chart'),
  grid: {
    y: { show: true }
  }
}
const chart = bb.generate(config);

billboard.esm.js:8537 Uncaught TypeError: $$.generatePoint is not a function
    at ChartInternal.initParams (billboard.esm.js:8537)
    at ChartInternal.init (billboard.esm.js:8464)
    at new Chart (billboard.esm.js:10206)
    at Object.generate (billboard.esm.js:20777)
    at state:544

d3 modules and their versions (I tried to make them consistent with those imported to billboard):

    "d3-array": "^2.8.0",
    "d3-axis": "1.0.12",
    "d3-brush": "1.1.6",
    "d3-color": "1.4.1",
    "d3-drag": "1.2.5",
    "d3-dsv": "1.2.0",
    "d3-ease": "1.0.7",
    "d3-format": "^2.0.0",
    "d3-geo": "^2.0.1",
    "d3-interpolate": "1.4.0",
    "d3-path": "^2.0.0",
    "d3-scale": "2.2.2",
    "d3-selection": "1.4.2",
    "d3-shape": "1.3.7",
    "d3-time-format": "2.2.3",
    "d3-transition": "1.3.2",
    "d3-zoom": "1.8.3",

[netil]

@jgoley, I made example based on your generation code and works fine.

• https://codesandbox.io/s/dazzling-robinson-vby26?file=/src/index.js

can you check if is your use case?

[tamascsaba]

It was my problem too, i had to delete node_modules and package-lock.json and reinstalled all modules.

[jsynacek]

Updating d3 to the latest version was what fixed the same issue for me.