How can I draw compass shape in d3.js and colour each triangle differently?

Question

I have drawn this shape in d3.js using a line generator - the idea is to make it look like a compass.

Left image: what I have
Right image: what I want (just the middle red/black, not the whole compass).

What I used to make this is:

function drawArrowCompass() { //draw arrow

    var dataArrow = [
        [35, 50],
        [50, 0],
        [65, 50],
        [50, 100],
        [35, 50]
    ];
    var lineGenerator = d3.line();
    var pathString = lineGenerator(dataArrow);

    var compassArrow = d3.select("#noun_compass");

    //draw arrow(s)
    compassArrow.append("path")
        .attr('d', pathString);

}

With the corresponding HTML:

However, the way I've done it, I can't see a way to add two different colour to the path. Does anyone know how I can draw such a shape in d3.js? Thanks in advance!!

user_3787777 · Answer

The way I'd do it, is create a path data (d attribute) for single arrow where path's origin is at the base of the arrow, and then make two paths with that same data, but different transform. This is robust, and allows easily to make changes to the position, orientation, and count of the arrows.

user_5768908 · Answer

A simple solution is using a linearGradient with the stop-colours meeting at 50%, like this:

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");

Given you hard coded the points forming the path, you have to rotate it to keep the gradient's direction, like this:

var svg = d3.select("svg");
var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("y1", "0%")
  .attr("y2", "100%")
  .attr("x1", "50%")
  .attr("x2", "50%")
  .attr("id", "gradient");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "red");
gradient.append("stop")
  .attr("offset", "50%")
  .attr("stop-color", "black");
drawArrowCompass();

function drawArrowCompass() {
  var dataArrow = [
    [35, 50],
    [50, 0],
    [65, 50],
    [50, 100],
    [35, 50]
  ];
  var lineGenerator = d3.line();
  var pathString = lineGenerator(dataArrow);
  var compassArrow = d3.select("#noun_compass");
  compassArrow.append("path")
    .attr('d', pathString)
    .attr("fill", "url(#gradient)")
    .attr("transform", "rotate(80, 50, 50)");
};

How can I draw compass shape in d3.js and colour each triangle differently?

2 Answers