d3js为条形图创建图例

Question

我的条形图有几个问题。当前的问题是试图创建一个图例。图例应为 Global 和 Local（蓝色和绿色）。 目前，图例生成 5 个框 - 其中 2 个是彩色的。我假设它正在遍历我的数据集并为每组列生成框。我不想要这个。

在格式化图例后，我希望能够使其具有交互性。因此，如果他们只想查看 global，则取消选择 local，图表会动态更新。我知道我需要对其进行调整并创建一个函数来更新数据、域等。

但在开始这条路之前，我想让图例正确填充。但如果传奇解决方案能走这条路，我将不胜感激。

I have a working Fiddle you can play around with.

数据源

var colors =    {0: ["Local", "#377EB8"],
             1: ["Global", "#4DAF4A"]};

var dataset = [
            {"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
            {"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
            {"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
            {"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
            {"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
        ];

标签代码

var legend = svg.append("g")
    .attr("class", "legend")
    //.attr("x", w - 65)
    //.attr("y", 50)
    .attr("height", 100)
    .attr("width", 100)
    .attr('transform', 'translate(-20,50)');


legend.selectAll('rect')
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", w - 65)
    .attr("y", function(d, i) {
        return i * 20;
    })
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", function(d) {
        var color = colors[dataset.indexOf(d)][1];
        return color;
    });

legend.selectAll('text')
    .data(dataset)
    .enter()
    .append("text")
    .attr("x", w - 52)
    .attr("y", function(d, i) {
        return i * 20 + 9;
    })
    .text(function(d) {
        var text = colors[dataset.indexOf(d)][0];
        return text;
    });

我知道我的 Colors 数组/对象可能不是最有效的方法。因此，如果它对解决方案有帮助，我愿意调整它。 另外，我更喜欢它是一个水平列表而不是垂直列表。

Answer 1

您需要使用colors 而不是dataset 作为图例的.data() 的参数。 为了让它工作，colors 必须是一个数组而不是一个对象：

var colors = [ ["Local", "#377EB8"],
               ["Global", "#4DAF4A"] ];

那么创建图例的代码就变成了：

var legendRect = legend.selectAll('rect').data(colors);

legendRect.enter()
    .append("rect")
    .attr("x", w - 65)
    .attr("width", 10)
    .attr("height", 10);

legendRect
    .attr("y", function(d, i) {
        return i * 20;
    })
    .style("fill", function(d) {
        return d[1];
    });

var legendText = legend.selectAll('text').data(colors);

legendText.enter()
    .append("text")
    .attr("x", w - 52);

legendText
    .attr("y", function(d, i) {
        return i * 20 + 9;
    })
    .text(function(d) {
        return d[0];
    });

参见the updated fiddle。