Javascript 更改D3图例中符号的颜色

我正试图改变一个传说中符号的颜色。我有以下变量

var symbolTypes = {
"triangleUp": d3.svg.symbol().type("triangle-up"),
"circle": d3.svg.symbol().type("circle")
};

我用它来创建一个有序的比例

var symbolScale = d3.scale.ordinal()
  .domain(['negative', 'positive'])
  .range([symbolTypes.circle(), symbolTypes.circle()]);

然后我添加图例如下

var legendPath = d3.legend.symbol()
  .scale(symbolScale)
  .orient("vertical")
  .title("My title");

firstPlot.select(".legendSymbol")
  .call(legendPath);

现在我希望图例（符号）中的圆圈为红色，三角形为蓝色。我该怎么做？我尝试添加一个颜色变量，然后以不同的方式定义legendPath

var colors = {"circle": "red", "triangleUp": "blue};
...
var legendPath = d3.legend.symbol()
  .scale(symbolScale)
  .style("fill", function(d){ return colors[d.type];}) // or attr
  .orient("vertical")
  .title("My title");

但它不起作用。有什么帮助吗？我不熟悉JavaScript/d3/svg

---

ps：我使用的是Susie Lu开发的

似乎Susie Lu的D3图例（v3版本）没有设置图例颜色的本地方法

然而，这是一项简单的任务。首先，根据数据，而不是形状，设置带有颜色的刻度：

var colorScale = d3.scale.ordinal()
  .domain(["negative", "positive"])
  .range(["red", "blue"])

然后，选择路径，应用颜色：

svg.selectAll(".cell path").each(function(d) {
  d3.select(this).style("fill", colorScale(d))
})

下面是一个演示：

var符号类型={
“triangleUp”：d3.svg.symbol（）.type（“triangle up”）（），
“圆”：d3.svg.symbol（）.type（“圆”）（）
};
var symbolScale=d3.scale.ordinal（）
.domain（['负'，'正']））
.范围（[symbolTypes.triangleUp，symbolTypes.circle]）；
var svg=d3.选择（“svg”）；
svg.append（“g”）
.attr（“类”、“legendSymbol”）
.attr（“转换”、“翻译（20,20）”）；
var colorScale=d3.scale.ordinal（）
.domain（[“负”、“正”]）
.范围（[“红色”、“蓝色”]）
var legendPath=d3.legend.symbol（）
.刻度（符号刻度）
.方向（“垂直”）
.头衔（“我的头衔”）；
svg.select（“.legendsymble”）
.call（legendPath）；
svg.selectAll（“.cell path”）。每个（函数（d）{
d3.选择（此）.样式（“填充”，色标（d））
})

感谢您的回复！我在情节中有其他不同颜色的符号。当我使用你建议的颜色时，其他颜色变成一种颜色！所以基本上我要做的是生成一个散点图，蓝色圆圈（负数）和红色三角形（正数），旁边有一个图例。我可以用适当的颜色生成绘图内的符号。我正在尝试创建一个图例，该图例可以正确映射到两种颜色的形状。您的其他符号会更改颜色，因为在我的代码中，我使用的是选择所有路径的

selectAll（“路径”）

！我的代码是一个基本示例，只是为了向您展示如何操作。请在

每个

中使用

selectAll（“.cell path”）

重试。这样，您将只选择图例中的符号。