p.scaleLinear is not a function

[JaLe29]

Hi, I am getting a error when I use your heatmap!

app.8afff0433bef2cc43286.js:138753 Uncaught TypeError: p.scaleLinear is not a function at e.value (app.8afff0433bef2cc43286.js:138753) at e.value (app.8afff0433bef2cc43286.js:138753) at e.value (app.8afff0433bef2cc43286.js:138753) at app.8afff0433bef2cc43286.js:58828 at measureLifeCyclePerf (app.8afff0433bef2cc43286.js:58639) at app.8afff0433bef2cc43286.js:58827 at CallbackQueue.notifyAll (app.8afff0433bef2cc43286.js:26305) at ReactReconcileTransaction.close (app.8afff0433bef2cc43286.js:60755) at ReactReconcileTransaction.closeAll (app.8afff0433bef2cc43286.js:15364) at ReactReconcileTransaction.perform (app.8afff0433bef2cc43286.js:15311)

Usage:

export default class PostHeatMap extends Component {

    constructor(props) {
        super(props)

        var data = [{
            "date": "2016-01-01",
            "total": 17164,
            "details": [{
                "name": "Project 1",
                "date": "2016-01-01 12:30:45",
                "value": 9192
            },
            {
                "name": "Project 2",
                "date": "2016-01-01 13:37:00",
                "value": 6753
            },
            {
                "name": "Project N",
                "date": "2016-01-01 17:52:41",
                "value": 1219
            }]
        }]

        this.state = {
            data: data,
        }

    }

    render() {
        return (
            <div>
                <CalendarHeatmap
                    data={this.state.data}
                    color='#45ff00'
                >
                </CalendarHeatmap>
            </div>
        )
    }
}

Can you please fix it? Thank you, it's amazing heat map.. :-)

[g1eb]

Hi, what version of d3 are you using? The heatmap depends on d3 v4.x

[JaLe29]

In my project, there is not included d3 library. It is necessary? Why does this not include in your library?

For testing I added:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

But there is a still same problem.

p.scaleLinear is not a function

[g1eb]

Hmm, interesting... I've literally copy pasted your snippet and it worked fine here :) https://i.imgur.com/SxO3Idi.png

I don't package d3 or moment for the same reason I don't package react, those are peer dependencies and users should already have a copy of those libs running. It also allows for more flexibility with specific d3/moment versions.

The d3 version you include should work fine (we use the same one in the demo). If you still get the error could you please make a jsfiddle to show it?

[JaLe29]

Okay, you're right.

This is my problem, in some library in my project, so far I have not figured out why.

You can close this issue. Your calendar working properly.

[g1eb]

Thanks, let me know if you have any other issues and if I can help :)