javascript - 使用 d3.js 创建图例

Question

我觉得我在这里效率低下。我正在尝试从一个数组中创建一个图例，但似乎我写的太多了，无法做到这一点。有人可以告诉我它是否可以优化吗？

http://jsbin.com/foqesivice/edit?js,console,output

var data = [
    {name: "AnotherLong"},
    {name: "BigData"},
    {name: "What"},
    {name: "Something"},
    {name: "Smalls"}
];

var margin = {top: 10, right: 10, bottom: 10, left: 10};

var color = d3.scale.category20c();

var svg = d3.select("body").append("svg")
  .attr("width", 400 - margin.left - margin.right)
  .attr("height", 1000 - margin.top - margin.bottom)

var g = svg.selectAll(".row")
  .data(data)
  .enter().append("svg:g")

var rectangles = g.selectAll(".cell")
  .data(data)
  .enter().append("svg:rect")
  .attr("width", 19)
  .attr("height", 19)
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
  .style("fill", function(d, i){return color(i);})

var text = g.selectAll(".text")
  .data(data)
  .enter().append("svg:text")
  .attr("x", 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
  .text(function(d){return d.name;})

编辑:

另一件困扰我的事情。出于某种原因，我的造型似乎很大胆。我没有定义任何样式。这是默认行为吗？

Answer 1

首先，将所有测量值和值移动到文件顶部并引用它们(这只会使文件更具可读性)

var legend_row_height = 50;

您不需要创建 g 元素。只需使用 x,y 属性而不是翻译来定位矩形和文本:

.attr("y", function(d,i){return legend_row_height * i;})

并将您的样式移动到 CSS 中。这最容易通过在对象上设置类来实现:

.classed("squares", 1)

然后添加 CSS:

.squares {
   stroke: white;
}