title: Split an SVG path lengthwise into multiple colours
body: <p>I have a tree visualisation in which I am trying to display paths between nodes that represent a distribution with multiple classes. I want to split the path lengthwise into multiple colours to represent the frequency of each distribution.</p>
  
  <p>For example: say we have Class A (red) and Class B (black), that each have a frequency of 50. Then I would like a path that is half red and half black between the nodes. The idea is to represent the relative frequencies of the classes, so the frequencies would be normalised.</p>
  
  <p>My current (naive) attempt is to create a separate path for each class and then use an x-offset. It looks like <a href="https://i.imgur.com/QJ2rNQN.png" rel="nofollow noreferrer">this</a>.</p>
  
  <p>However, as shown in the image, the lines do not maintain an equal distance for the duration of the path.</p>
  
  <p>The relevant segment of code:</p>
  
  <pre><code>linkGroup.append("path").attr("class", "link")
                .attr("d", diagonal)
                .style("stroke", "red")
                .style("stroke-width", 5)
                .attr("transform", function(d) {
                    return "translate(" + -2.5 + "," + 0.0 + ")"; });
  
  linkGroup.append("path").attr("class", "link")
                .attr("d", diagonal)
                .style("stroke", "black")
                .style("stroke-width", 5)
                .attr("transform", function(d) {
                    return "translate(" + 2.5 + "," + 0.0 + ")"; });
  </code></pre>
  
  <p>It would be great if anyone has some advice.</p>
  
  <p>Thanks!</p>