javascript - 更改 D3-legend 中符号的颜色

Question

我正在尝试更改图例中符号的颜色。我有以下变量

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

现在我希望图例(符号)中的圆圈为红色，三 Angular 形为蓝色。我怎样才能做到这一点？我尝试添加一个颜色变量，然后以不同方式定义 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:我用的是D3-legend由 Susie Lu 开发

Answer 1

似乎 Susie Lu 的 D3-legend(v3 版本)没有本地方法来设置 legend.symbol 的颜色。

但是，这是一项简单的任务。首先，根据数据而不是形状设置颜色比例:

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 symbolTypes = {
  "triangleUp": d3.svg.symbol().type("triangle-up")(),
  "circle": d3.svg.symbol().type("circle")()
};

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

var svg = d3.select("svg");

svg.append("g")
  .attr("class", "legendSymbol")
  .attr("transform", "translate(20, 20)");

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

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

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

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

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.js"></script>
<svg></svg>