philogb / jit

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web
http://thejit.org
Other
1.51k stars 297 forks source link

Force Directed renders incorrectly? #189

Closed asinverse closed 9 years ago

asinverse commented 9 years ago

Hello, The output graph is not corresponded with the input data: This is my data:

var data = [{
    "id":"xukoh-beded-vyned",
    "name":"xukoh",
    "adjacencies":[
      {"nodeTo":"xicem-popik-zosen"}
    ]
  },{
    "id":"xicem-popik-zosen",
    "name":"xicem",
    "adjacencies":[]
  },{
    "id":"xeloc-defyp-sozog",
    "name":"xeloc",
    "adjacencies":[{"nodeTo":"xukoh-beded-vyned"},{"nodeTo":"xicem-popik-zosen"},{"nodeTo":"xokac-musuf-regyn"}]
  },{
    "id":"xokac-musuf-regyn",
    "name":"xokac",
    "adjacencies":[]
  },{
    "id":"xudiv-gomav-himat",
    "name":"xudiv",
    "adjacencies":[{"nodeTo":"xihes-vobyz-levyr"},{"nodeTo":"xeloc-defyp-sozog"},{"nodeTo":"xibif-viset-pocat"}]
  },{
    "id":"xibif-viset-pocat",
    "name":"xibif",
    "adjacencies":[{"nodeTo":"xeloc-defyp-sozog"}]
  },{
    "id":"xetol-rytik-hosev",
    "name":"xetol",
    "adjacencies":[{"nodeTo":"xeloc-defyp-sozog"}]
  },{
    "id":"xudar-kolim-miman",
    "name":"xudar",
    "adjacencies":[{"nodeTo":"xeloc-defyp-sozog"}]
  },{
    "id":"xelap-votud-muvuz",
    "name":"xelap",
    "adjacencies":[{"nodeTo":"xeloc-defyp-sozog"}]
  },{
    "id":"xihes-vobyz-levyr",
    "name":"xihes",
    "adjacencies":[{"nodeTo":"xetol-rytik-hosev"},{"nodeTo":"xudar-kolim-miman"}]
  },{
    "id":"xomab-katof-zyzyc",
    "name":"xomab",
    "adjacencies":[{"nodeTo":"xudiv-gomav-himat"}]
  }];

And this is what I got: fg

I was using the example provided on your site, just change a bit in options:

Node: {
      overridable: true,
      dim: 7,
      color: '#83548B',
      type: 'circle'
    },
    Edge: {
      overridable: true,
      color: '#23A4FF',
      type: 'arrow',
      lineWidth: 2
    },

What do I have to change to get a correct output?

asinverse commented 9 years ago

I found the solution, add data property in each adjacencies:

    {
      'nodeTo': 'xicem-popik-zosen',
      'data': {
        '$direction': ['xeloc-defyp-sozog', 'xicem-popik-zosen']
      }
    }