Question

我希望我的标记与单击按钮时所代表的线条/链接的颜色相同。

我在这里制作箭头：

  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

您无法单独更改同一标记的颜色，以便与动态线条的颜色相对应。唯一的方法是创建单独的标记，每个标记在defs中使用与您想要的颜色对应的ID或类进行不同的着色，然后使用这些CSS选择器。

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

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

1 个答案: