Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Network clustering: Cannot read property 'font' of undefined #2677

Closed
AoDev opened this issue Feb 5, 2017 · 11 comments
Closed

Network clustering: Cannot read property 'font' of undefined #2677

AoDev opened this issue Feb 5, 2017 · 11 comments

Comments

@AoDev
Copy link
Contributor

AoDev commented Feb 5, 2017

Hi, I have basically copied the example of clustering here.

Just using my own data.

when initiating the graph

var container = document.getElementById('#network')
this.graph = new vis.Network(container, {}, graphOptions)

When getting the data (before, I add a group property to each node)

    this.graph.setData(graphData)

    var groups = ['group1', 'group2', 'group3']
    var clusterOptionsByData
    for (var i = 0; i < groups.length; i++) {
      var group = groups[i]
      clusterOptionsByData = {
        joinCondition (childOptions) {
          return childOptions.group === group
        },
        clusterNodeProperties: {
          id: 'cluster:' + group,
          borderWidth: 3,
          shape: 'dot',
          color: '#000',
          label: 'group:' + group,
          font: {
            color: '#000',
            size: 14
          }
        }
      }

      this.graph.cluster(clusterOptionsByData)
    }

My graph config

const graphOptions = {
  physics: false,
  edges: {
    arrows: 'to',
    physics: false,
    scaling: {
      min: 1,
      max: 5,
      label: {
        enabled: false
      }
    },
    smooth: {
      enabled: false,
      type: 'cubicBezier',
      forceDirection: 'vertical',
      roundness: 0.5
    }
  },
  nodes: {
    shape: 'dot',
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false
      }
    },
    font: {
      strokeWidth: 2,
      strokeColor: '#fff',
      multi: 'html'
    }
  },
  layout: {
    improvedLayout: true,
    hierarchical: {
      enabled: true,
      levelSeparation: 150,
      nodeSpacing: 200,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'directed'   // hubsize, directed
    }
  }
}

Stacktrace:

TypeError: Cannot read property 'font' of undefined
    at Label.propagateFonts (vis.js:34775)
    at Cluster.setOptions (vis.js:34226)
    at Cluster.Node (vis.js:34126)
    at new Cluster (vis.js:43598)
    at NodesHandler.create (vis.js:33809)
    at ClusterEngine._cluster (vis.js:42959)
    at ClusterEngine.cluster (vis.js:42556)
    at Network.cluster (vis.js:33010)

I believe it breaks in Label, here
because for some reason options was not passed / is undefined.

@mojoaxel
Copy link
Member

mojoaxel commented Feb 5, 2017

@AoDev Thanks for the details problem description. But I can not reproduce this problem with your example-code: http://jsbin.com/foyufig/1/edit?html,js,console,output

Can you please try to reproduce the error in a public jsbin. Thanks.

@AoDev
Copy link
Contributor Author

AoDev commented Feb 5, 2017

Thanks, I'll try tomorrow.

What I can say is, by removing the nodes.font.multi from my config, which is currently set to html, then it will render the cluster properly. Mainly because this propagateFonts seems to run only when the multi option is set.

@Tooa
Copy link
Member

Tooa commented Feb 16, 2017

Please provide us a minimal example via jsbin.com showing the error and explain how to reproduce the issue.

@AoDev
Copy link
Contributor Author

AoDev commented Feb 16, 2017

@Tooa http://jsbin.com/vorozibulo/edit?html,js,console,output @mojoaxel jsbin was missing the grouping.
screen shot 2017-02-16 at 12 56 13

@Tooa Tooa added this to the Minor Release v4.19 milestone Feb 16, 2017
@mojoaxel mojoaxel modified the milestones: Minor Release v4.20, Patch Release v4.20.1 May 21, 2017
@arunkumarpro1
Copy link

arunkumarpro1 commented Jul 29, 2017

@wimrijnders I am still getting this error. Is there any fix for this?

@wimrijnders
Copy link
Contributor

wimrijnders commented Jul 29, 2017

@arunkumarpro1 I just scanned the issues; I am under the impression that this was fixed with #3025 and released in vis v1.20.0. Are you using this version or later?

If not, please upgrade first. Otherwise, the workaround is setting option options.nodes.font.multi: false.

Please notify me about the vis-version used, and if given workaround works. If this does not solve it, I may need to look at this issue in-depth.

@arunkumarpro1
Copy link

@wimrijnders I am using vis v4.20.1.

Yes the given workaround works fine for me. I can set options.nodes.font.multi to false for now.
Thanks a lot 👍

@wimrijnders
Copy link
Contributor

OK good. However, it worries me that this still occurs. Will dive into this issue regardless.

@arunkumarpro1
Copy link

Yes. That would be really great.

@arunkumarpro1
Copy link

arunkumarpro1 commented Aug 2, 2017 via email

@wimrijnders
Copy link
Contributor

wimrijnders commented Sep 28, 2017

@arunkumarpro1 There is a fix for this issue. Will hopefully be in the next release.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants