denisemauldin / d3-timeline

D3 timeline
BSD 3-Clause "New" or "Revised" License
168 stars 72 forks source link

hover() works, but click() errors Cannot read properties of null (reading 'ctrlKey'), (reading 'sorueEvent') #31

Closed rijvirajib closed 1 year ago

rijvirajib commented 1 year ago

Hello, I have 3 timelines data, .hover() works but .click() returns an error.

ERROR TypeError: Cannot read properties of null (reading 'ctrlKey')
    at SVGSVGElement.defaultFilter (zoom.js:13:11)
    at SVGSVGElement.mousedowned (zoom.js:251:1)
    at SVGSVGElement.<anonymous> (on.js:3:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25595:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
    at invokeTask (zone.js:1600:1)
    at SVGSVGElement.globalZoneAwareCallback (zone.js:1626:1)

ERROR TypeError: Cannot read properties of null (reading 'sourceEvent')
    at __WEBPACK_DEFAULT_EXPORT__ (sourceEvent.js:5:1)
    at Module.__WEBPACK_DEFAULT_EXPORT__ (mouse.js:5:26)
    at SVGCircleElement.<anonymous> (d3-timelines.js:367:1)
    at SVGCircleElement.<anonymous> (on.js:3:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25595:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
    at invokeTask (zone.js:1600:1)

Adding click handler:

var chart = d3Timelines.timelines()
      .showAxisTop()
      .background('')
      .margin({left: 0, right: 0, top: 2.5, bottom: 0})
      .tickFormat({
        tickInterval: 1,
        tickSize: 1
      })
      .click(function(d: any, i: number, datum: any) {
        // This does not work
      })
      .hover(function (d, i, datum) {
        // This loads fine
      });

Timeline Data:

[
    {
        "times": [
            {
                "color": "#607D8A",
                "starting_time": 1663080836521,
                "ending_time": 1663083536521
            }
        ]
    },
    {
        "times": [
            {
                "starting_time": 1663080839071,
                "display": "circle"
            }
        ]
    },
    {
        "times": [
            {
                "starting_time": 1663081052921,
                "display": "circle"
            }
        ]
    },
    {
        "class": "pA",
        "times": [
            {
                "color": "red",
                "starting_time": 1663080836521,
                "ending_time": 1663080837521
            }
        ]
    }
]
rijvirajib commented 1 year ago

Related to mismatch of versions, d3-selection and d3-zoom removed event somewhere on the way to 3.0.0.