如何更改标记（箭头）的颜色？

Question

我希望我的标记与单击按钮时它们所代表的 lines/links 颜色相同。

我在这里制作箭头：

  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");

我将箭头添加到链接中：

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+ ')' })

现在我做了一个按钮来改变链接的颜色:

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

并尝试用标记来完成，但这似乎不起作用

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

我在标记中使用的数据与我在链接中使用的数据相同，我认为这是最初的问题，但我碰壁了，不知道该怎么做。

这是一个有效的示例，我已经尝试使用它但似乎仍然无法使我的工作正常

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

Answer 1

您不能单独更改同一标记的颜色以与动态线条的颜色相对应。唯一的方法是创建单独的标记，每个标记在您的 def 中使用不同颜色的 ids 或类对应于您想要的颜色，然后使用那些 CSS 选择器。

您会注意到在您 link 的示例中，标记是用它们的颜色和形状定义的，并由相应的行单独引用。

如何更改标记（箭头）的颜色？

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

javascript

d3.js