Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG image for node #36

Closed
pradeep4321 opened this issue Nov 14, 2017 · 6 comments

Comments

@pradeep4321
Copy link

@pradeep4321 pradeep4321 commented Nov 14, 2017

Can we support SVG images in place of D3J shapes for Nodes.

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Nov 14, 2017

This is a repeated feature request #31. Still I think an approach where we specify SVG's to customize nodes it's the way to go, that's why I'll introduce a little more detail on this issue.

So this feature could basically be achieved by passing down to nodes some svg or some path to render instead of some d3 shape. We would have something like this is the node render method:

// node/index.jsx, render method
(...)
        if (this.props.customNode) {
            // render some SVG
            return (
                <g {...gProps}>
                    // Adding some random path just for demonstration
                    <path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z" {...pathProps}/>
                </g>
            );
        } else {
            // render some node symbol
            pathProps = Object.assign(pathProps, { d: nodeHelper.buildSvgSymbol(this.props.size, this.props.type) });

            return (
                <g {...gProps}>
                    <path {...pathProps}/>
                    {this.props.renderLabel && <text {...textProps}>{this.props.label}</text>}
                </g>
            );
        }
(...)

This would produce something like this,

screen shot 2017-11-14 at 23 08 28

The main problem here is that we cannot easily use d3-shape scale method to keep the graph visually consistent, as you can see the nodes are not being placed in their correct positions because a scale was not applied, and this is the main blocker for react-d3-graph to offer such feature.

I will certainly go for this in a near future, It would be great to have @singhxp feedback on this since he first requested a similar feature.

@pradeep4321

This comment has been minimized.

Copy link
Author

@pradeep4321 pradeep4321 commented Nov 15, 2017

I think the x,y location used to draw the SVG us top left corner of SVG image, if we fix the location to centre the image will look fine. i am checking this.

@stale stale bot added the wontfix label Dec 5, 2017
Repository owner deleted a comment from stale bot Dec 6, 2017
@stale stale bot removed the wontfix label Dec 6, 2017
@stale stale bot added the wontfix label Dec 26, 2017
Repository owner deleted a comment from stale bot Dec 26, 2017
@stale stale bot removed the wontfix label Dec 26, 2017
@stale stale bot added the wontfix label Jan 28, 2018
Repository owner deleted a comment from stale bot Jan 29, 2018
@stale stale bot removed the wontfix label Jan 29, 2018
@stale stale bot added the wontfix label Feb 18, 2018
Repository owner deleted a comment from stale bot Feb 18, 2018
@stale stale bot removed the wontfix label Feb 18, 2018
@rayaqin

This comment has been minimized.

Copy link

@rayaqin rayaqin commented Mar 1, 2018

pradeep4321 did you manage to make it work and look fine?

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Mar 30, 2018

@pradeep4321 and @rayaqin and for others that might be interested, I'll be picking this up, already have an implementation in mind where rd3g users will be able to provide a resource reference to some svg.

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Apr 1, 2018

@pradeep4321 @rayaqin Closing this issue, react-d3-graph@1.2.0 allows for clients to provide custom svg for nodes.

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Aug 6, 2019

For those looking into this issue, there is a way more advanced way to customize nodes in react-d3-graph though node.viewGenerator, you can pass a custom render function per node within the config. Check out the docs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.