Returning x and y coordinates for nodes using viewGenerator

Description I am trying create a tree like web where there are special nodes that go straight down like a timeline. and branch nodes that stem from those node nodes. So would like to keep the default functionality where branch nodes x and y coordinates are calculated, but those special nodes always need to have same value returned as their x coordinate. Y can increment based whatever value.

To Reproduce I am using default graph settings but passing in default x and y for time nodes.

  data: {
    nodes: [
      {
        id: '02af27e0-34f1-4381-bc19-85f525a54f94',
        nodeType: 'node--case',
        updatable: true,
        name: 'Title 1',
      },
      {
        nodeType: 'timeLabel--case',
        id: '02af27e0-34f1-4381-bc19-85f525a54f94-t',
        name: '2019-08-30',
        x: 400,
        y: 120
      },
      {
        id: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48',
        nodeType: 'node--case',
        updatable: true,
        name: 'Title 2',
      },
      {
        nodeType: 'timeLabel--case',
        id: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48-t',
        name: '2019-08-26',
        x: 400,
        y: 240
      },
      {
        id: '7ea1661a-504c-44c7-8cc9-9a809ce59d84',
        nodeType: 'node--case',
        updatable: true,
        name: 'Title 3',
      },
      {
        nodeType: 'timeLabel--case',
        id: '7ea1661a-504c-44c7-8cc9-9a809ce59d84-t',
        name: '2019-08-22',
        x: 400,
        y: 360
      },
      {
        id: '9caccc16-4696-48aa-b69b-1529b03d880c',
        nodeType: 'node--case',
        updatable: true,
        name: 'Title 4',
      },
      {
        id: '45ccc16-4696-48aa-b69b-1529b03d880c',
        nodeType: 'node--case',
        updatable: true,
        name: 'Title 5',
      },
      {
        nodeType: 'timeLabel--case',
        id: '9caccc16-4696-48aa-b69b-1529b03d880c-t',
        name: '2019-02-21',
        x: 400,
        y: 480
      }
    ],
    links: [
      {
        source: '02af27e0-34f1-4381-bc19-85f525a54f94-t',
        target: '02af27e0-34f1-4381-bc19-85f525a54f94'
      },
      {
        source: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48-t',
        target: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48'
      },
      {
        source: '02af27e0-34f1-4381-bc19-85f525a54f94-t',
        target: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48-t',
        color: '#00d3d3'
      },
      {
        source: '7ea1661a-504c-44c7-8cc9-9a809ce59d84-t',
        target: '7ea1661a-504c-44c7-8cc9-9a809ce59d84'
      },
      {
        source: 'ef9ea598-6ed6-4e12-a864-f3a414b90a48-t',
        target: '7ea1661a-504c-44c7-8cc9-9a809ce59d84-t',
        color: '#00d3d3'
      },
      {
        source: '9caccc16-4696-48aa-b69b-1529b03d880c-t',
        target: '9caccc16-4696-48aa-b69b-1529b03d880c'
      },
      {
        source: '7ea1661a-504c-44c7-8cc9-9a809ce59d84-t',
        target: '9caccc16-4696-48aa-b69b-1529b03d880c-t',
        color: '#00d3d3'
      },
      { 
        source: 45ccc16-4696-48aa-b69b-1529b03d880c,
        target: '9caccc16-4696-48aa-b69b-1529b03d880c'
      }
    ]
  }

Expected behavior My hopes was that I could use viewGenerator or some other method to force the calculator to use my x and y coordinates for the timeLabel nodes.

Environment:

• OS: Mac v10.10.5
• Browser: chrome v76.0.3809.132
• Node version: v10.3.0
• react-d3-graph: version 2.1.0
• d3 version: 5.11.0
• react version: 16.7.0

Additional context This isn’t so much bug as it is a question about the limitations of the library. (Potentially a feature request). My purpose is to create a timeline with where the date nodes will have a corresponding event node. and from there event nodes can branch off like a regular web.

[DavidBates]

Hi, @jalite1991 thanks for the more detailed report. Now I understand what you’re trying to achieve. Unfortunately, you cannot give coordinates to some nodes and leave other nodes without coordinates. I would first recommend you to use staticGraphWithDragAndDrop property, you can read in the docs about it, and then you would need to provide coordinates to all the nodes, not only the ones you need to keep in the timeline.

Btw, node.viewGenerator it’s something else entirely, it basically allows you to provide a custom render method for your node, you can still, of course, have custom x and y props being pass down alongside with that custom node, but it won’t fix your problem.

So glad I ran across this. I was facing the same issue of statically placing nodes in a hierarchical structure. Never occurred to me to calculate the offsets myself before rendering. It would be nice to have a setting where we could define groupings of nodes and levels so that we could dynamically generate a hierarchical structure.

[danielcaldas]

Hi, @jalite1991 thanks for the more detailed report. Now I understand what you’re trying to achieve. Unfortunately, you cannot give coordinates to some nodes and leave other nodes without coordinates. I would first recommend you to use staticGraphWithDragAndDrop property, you can read in the docs about it, and then you would need to provide coordinates to all the nodes, not only the ones you need to keep in the timeline.

Btw, node.viewGenerator it’s something else entirely, it basically allows you to provide a custom render method for your node, you can still, of course, have custom x and y props being pass down alongside with that custom node, but it won’t fix your problem.