用d3.js創建圖例

Question

我覺得我在這里效率低下。 我試圖從一個數組創建一個圖例，似乎我寫太多了。 有人可以告訴我是否可以優化？

http://jsbin.com/foqesivice/edit?js，控制台，輸出

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

Answer 2

@MatthewWilcoxson的答案很好，但是這里有一個更特定於d3的重寫。 本質上，不要重復綁定數據，保留g ，在其上綁定，定位並在其中添加rect和text ：

 <!DOCTYPE html> <html> <head> <script data-require="d3@4.0.0" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> 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(), cellDim = 19; 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") .attr("transform", function(d, i) { return "translate(" + (0) + "," + ((cellDim + 1) * i) + ")" }); g.append("svg:rect") .attr("width", cellDim) .attr("height", cellDim) .style("fill", function(d, i) { return color(i); }); g.append("text") .attr("dy", "1em") .attr("dx", cellDim + 2) .text(function(d) { return d.name; }); </script> </body> </html>

用d3.js創建圖例

問題描述

2 個解決方案

解決方案1
2 2016-10-06 18:04:15

解決方案2
1 已采納 2016-10-06 20:18:45

用d3.js創建圖例

問題描述

2 個解決方案

解決方案1 2 2016-10-06 18:04:15

解決方案2 1 已采納 2016-10-06 20:18:45

解決方案1
2 2016-10-06 18:04:15

解決方案2
1 已采納 2016-10-06 20:18:45