react-d3-tree icon indicating copy to clipboard operation
react-d3-tree copied to clipboard

Docs/README update request: styles options

Open matthewshim-ms opened this issue 4 years ago • 3 comments

It would be nice to include a list of available SVG/styling properties are available for the links, nodes etc.

The docs provide an example in the Styling section:

links: {
     stroke: 'blue',
     strokeWidth: 1
}

Which is nice, but not all SVG/CSS properties seem to be available. In addition, the properties are not direct. For example, the above uses 'strokeWidth' in camel case, whereas official docs use 'stroke-width'.

**Edit: To clarify, I know that props for SVG specific attributes can be located in index.d.ts, for example:

...
 string?: number | string;
        stroke?: string;
        strokeDasharray?: string | number;
        strokeDashoffset?: string | number;
        strokeLinecap?: "butt" | "round" | "square" | "inherit";
        strokeLinejoin?: "miter" | "round" | "bevel" | "inherit";
        strokeMiterlimit?: number | string;
        strokeOpacity?: number | string;
        strokeWidth?: number | string;
        surfaceScale?: number | string;
        systemLanguage?: number | string;
        tableValues?: number | string;
        targetX?: number | string;
        targetY?: number | string;
        textAnchor?: string;
        textDecoration?: number | string;
        textLength?: number | string;
        textRendering?: number | string;
        to?: number | string;
        transform?: string;
...

But not all seem to apply, or at least the defaults overriding whatever I pass through.

matthewshim-ms avatar Dec 12 '19 21:12 matthewshim-ms

Hi @matthewshim-ms,

Yes you're spot on here; the docs have become messy & rather opaque over time due to too many ad-hoc additions to the v1 API (basically, my initial approach to this library was too opinionated when I started it 3+ years ago).

I'm currently reviving my WIP on the v2 branch, since I have some proper time to dedicate to this library over the coming weeks. The current aim is to:

  • refactor to a Typescript-first approach (with properly generated type definitions etc. of course).
  • Auto-generate docs for any/all public API props (e.g. via typedoc)
  • Rewrite the readme from scratch, modelled around an a lot less opinionated and more flexible v2 API.

I'm going to add this issue to the v2 milestone and post updates here when relevant. If you're interested, I'd love to get your input on the v2 docs when they're an active work in progress :)

bkrem avatar Jan 15 '20 14:01 bkrem

@bkrem Ahh the property I was looking for was 'depthFactor'.

If I have time I'll make a simple PR just to update some of the property descriptions :)

matthewshim-ms avatar Jan 21 '20 00:01 matthewshim-ms

Glad you found it 👍 I'll leave this open until the new docs are ready as the de facto reference issue for the v2 docs. Please feel free to follow up here if something is still ambiguous for you in the v1 docs, I'll do my best to add a timely response after I've addressed some older outstanding issues :)

bkrem avatar Jan 23 '20 15:01 bkrem