dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
480 stars 44 forks source link

Support for unique Marker per Edge #122

Closed ikkysleepy closed 1 year ago

ikkysleepy commented 1 year ago

I was trying to have each edge have their own Marker like so in the configuration:

  marker: {
                source: {
                    type: edge => edge.sourceType
                },
                target: {
                    type: edge => edge.targetType
                },
            },

but that doesn't seem to work and it looks like the marker is a global settings for all edges. Is this as designed and do you have any plans on having unique marker per edge?

ikkysleepy commented 1 year ago

I found a similar issue with the fontSzie , where this works for a node but not for an edge:

Edge Config

      label: {
                visible: true,
                fontFamily: undefined,
                fontSize: edge => edge.fontSize,
                lineHeight: 1.1,
                margin: 4,
                direction: 'south',
                text: 'name'
            }

Node Config

 label: {
                fontFamily: undefined,
                directionAutoAdjustment: true,
                fontSize: node => node.fontSize,
                lineHeight: 1.1,
                color: node => node.textColor,
                margin: node => node.margin,
                direction: node => node.direction,
                text: 'name'
            }
dash14 commented 1 year ago

Hi @ikkysleepy,

First, for marker configuration, the format of the lambda function is (args: [Edge, StrokeStyle]) => value, so please try modifying the argument as follows.

    marker: {
      source: {
        type: ([edge]) => edge.sourceType,
      },
      target: {
        type: ([edge]) => edge.targetType,
      },
    },

Next, for edge label setting, we have released a new version that supports specification by lambda function, so please try it. https://github.com/dash14/v-network-graph/releases/tag/v0.9.5

Best Regards

ikkysleepy commented 1 year ago

Great. Thank You. Both of the solutions worked.