add dash-array to siblings

src/components/NodeMap.vue

@@ -8,7 +8,7 @@
         v-for="(item, index) in links"
         :key="`link_${index}`"
         :d="lineGenerator([item.source, item.target])"
-        stroke="black"
+        :class="['link', item.linkType || item.target.data.linkType]"
       />
 
       <template v-for="(node, index) in nodes">
@@ -152,8 +152,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-path {
+.link {
   stroke: grey;
+
+  &.siblings {
+    stroke-dasharray: 4;
+  }
+
+  &.parents {
+    stroke: red;
+    opacity: .3;
+  }
 }
 
 text {

src/helpers/d3Data.js

@@ -11,7 +11,13 @@ function getLinked (text) {
   const types = ['siblings', 'children', 'parents']
   return types.reduce((acc, type) => {
     // Handle `null` and `undefined`
-    return text[type] ? [...acc, ...text[type]] : acc
+    if (text[type]) {
+      text[type].forEach((item, i) => {
+        item.linkType = type
+      })
+      return [...acc, ...text[type]]
+    }
+    return acc
   }, [])
 }
 
@@ -66,7 +72,7 @@ export function toManyManyData (rawData) {
   }, []).map(({ data, children, depth }) => {
     if (children) {
       children.forEach(child => {
-        links.push({ source: data.id, target: child.data.id })
+        links.push({ source: data.id, target: child.data.id, linkType: child.data.linkType })
       })
     }
     return {