4

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

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

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

我有一个可以玩的小提琴。

数据源

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

4

1 回答 1

3

您需要使用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];
    });

Cf更新的小提琴。

于 2013-04-23T21:18:12.877 回答