From eece18184ee29c8b2ad55dcc435ec731f9d195e5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 20 Apr 2021 11:23:39 +0200
Subject: [PATCH] add dash-array to siblings

---
 src/components/NodeMap.vue | 13 +++++++++++--
 src/helpers/d3Data.js      | 10 ++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/NodeMap.vue b/src/components/NodeMap.vue
index 0988a2b..4d0758d 100644
--- a/src/components/NodeMap.vue
+++ b/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 {
diff --git a/src/helpers/d3Data.js b/src/helpers/d3Data.js
index fabee37..7c418ce 100644
--- a/src/helpers/d3Data.js
+++ b/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 {