d3js为条形图创建图例

Question

我遇到了几个与我的条形图有关的问题。目前的问题是试图创造一个传奇。图例应为全球和本地（蓝色&绿色）。 目前该图例生成5个盒子 - 其中2个是彩色的。我假设它正在通过我的数据集并为每组列生成框。我不想要这个。

当我得到格式化的图例后，我希望能够让它交互。因此，如果他们只想看到全球，那么他们取消选择本地，并且图表动态更新。我知道我需要调整它，并创建一个功能来更新数据，域等。

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

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

我知道我颜色阵列/对象可能不是最有效的方式。所以我愿意调整，如果它有助于解决方案。 此外，我宁愿它是一个水平列表，而不是垂直。

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。