plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.11k stars 1.03k forks source link

Tree does duplicate nodes instead of linking #2645

Closed xeinebiu closed 3 weeks ago

xeinebiu commented 4 weeks ago

I am not sure if this is a bug or it is intended to work like this, but I would expect there is only one node "A" instead of 2. As we can see on the screenshot, Root and Node "C" are linked to two different node "A".


image


"@nivo/tree": "0.87.0",

        <ResponsiveTree
          activeLinkThickness={8}
          activeNodeSize={24}
          fixNodeColorAtDepth={1}
          identity="name"
          inactiveLinkThickness={2}
          inactiveNodeSize={12}
          labelsPosition="inward"
          layout="right-to-left"
          linkCurve="step-before"
          linkThickness={2}
          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
          meshDetectionRadius={80}
          motionConfig="stiff"
          nodeColor={{ scheme: 'tableau10' }}
          data={{
            name: 'Root',
            color: 'hsl(92, 42%, 42%)',
            children: [
              {
                name: 'A',
                color: 'hsl(161, 31%, 31%)',
              },
              {
                name: 'C',
                color: 'hsl(95, 45%, 45%)',
                children: [
                  {
                    name: 'A',
                    color: 'hsl(161, 31%, 31%)',
                  },
                  {
                    name: 'B',
                    color: 'hsl(161, 31%, 31%)',
                    children: [
                      {
                        name: 'D',
                        color: 'hsl(143, 53%, 53%)',
                        children: [],
                      },
                    ],
                  },
                ],
              },
            ],
          }}
          linkColor={{
            from: 'target.color',
            modifiers: [['opacity', 0.4]],
          }}
        />
plouc commented 3 weeks ago

It's normal, those are 2 different nodes, this component is a tree, and in a tree, A cannot be both a direct child of root and C.