CODEWITHSUNDEEP
javascriptd3.js
rekoDolph
rekoDolph

Reputation: 823

How do I change the colour of markers (arrow heads)?

I want my markers the same colour as the lines/links they represent when I click a button.

I make the arrows here : 

  var arrows = inner.append("defs").selectAll("marker")
        .data(data)
        .enter().append("marker")
            .attr("id", "arrow") // changed to - .attr("id", function(d){ return 'arrow' + d.name})
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 20) 
            .attr("refY", 0)
            .attr("markerWidth", 10) //size of arrow head
            .attr("markerHeight", 10)
            .attr("orient", "auto")
            .style("stroke-width", lineWidth)
            .append("path")
            .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
            .style("stroke", "steelblue");

I add the arrows to the links :

var links = svg.selectAll(".link").append("g")
.style("marker-end", "url(#arrow)") //-changed to - .style("marker-end", function(d,i){ return 'url(#arrow' + d.name+ ')' })

Now I have made a button to change the colour of the links :

var links = inner.selectAll("line.link")
            .style("stroke", function(d) { return color(d.name); });

And tried to do it with the marker, but this doesnt seem to work 

var arrows = inner.selectAll("#arrow")
            .style("stroke", function(d) { return color(d.name); });

I am using the same data in the markers as I am in the links which I thought was the original problem but Ive hit a wall and don't know how to do it.

Here is an example that works which I have tried working from but still cant seem to get mine working

"http://bl.ocks.org/dustinlarimer/5888271"

Upvotes: 1

Views: 2775

Answers (1)

Elijah
Elijah

Reputation: 4639

You can't change the color of the same marker individually to correspond to the color of the line on-the-fly. The only way to do it is to create separate markers that are each colored differently in your defs with ids or classes that correspond to the colors you want and then use those CSS selectors.

You'll notice in the example you link to, the markers are defined with their color and shape and are individually referenced by the corresponding line.

Upvotes: 3

Related Questions