Question

我使用此脚本创建动态图表（请参阅original source code和简化的fiddle）。我想知道是否可以将图例添加到此图表中，以显示每种颜色的含义。含义应与输入JSON中的字段name相对应。

通常我按如下方式创建一个图例：

var colors = ["#F0E5FF","#E1CCFF","#C499FF","#AC79F2","#8D4CE5","#6100E5","#C94D8C"];
var colorScaleDomain = [300, 1000, 2000, 5000, 10000, 20000, 50000];

var colorScale = d3.scale.quantile()
                   .domain(colorScaleDomain)
                   .range(colors);

但是，当我使用colorScale = d3.scale.category10()时，不确定如何使其适应我当前的情况。

Answer 1

由于d3.scale.category10()按照先到先得的原则运行，也就是说，当新数据进入时，它会向域中添加值，您只需按相同的顺序传递name你画了圆圈。

但是，要实现此目的，您必须更改功能color()：

function color(d) {
    return d.name;
}

现在，圆圈和图例在色标中都具有相同的域。

现在，创建传说：

var legendGroup = svg.append("g")
    .attr("transform", "translate(600,50)");

var legend = legendGroup.selectAll(".legend")
    .data(SPX.map(d => d.name))
    .enter()
    .append("g")
    .attr("transform", (d, i) => "translate(0," + 20 * i + ")")

var legendRects = legend.append("rect")
    .attr("width", 10)
    .attr("height", 10)
    .attr("fill", d => colorScale(d));

var legendText = legend.append("text")
    .attr("x", 14)
    .attr("y", 8)
    .text(d => d);

这是你的小提琴，我把传说放在右上角：http://jsfiddle.net/8yd04e0p/

如何将动画添加到动态影像

1 个答案: