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

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

Answer 1

似乎Susie Lu的D3传奇（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>

更改D3-legend中符号的颜色

1 个答案: