d3.jsで凡例を作成

私はここで非効率的であるように感じる。私は配列から伝説を作成しようとしており、これを行うにはあまりにも多くのことを書いているようです。誰かが最適化できるか教えてもらえますか？d3.jsで凡例を作成

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

EDIT：私を悩ます

もう一つ。私のスタイリングはなんらかの理由で大胆なようです。私はスタイルを定義していません。そのデフォルトの動作ですか？

出典

2016-10-06 konrad

は良いですが、ここでは再書き込みよりd3具体的です。基本的に、データをダブルバインドgを維持し、その上にバインド、それを配置し、それにrectとtextを追加しないでください：

確か

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" 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>

出典

2016-10-06 20:18:45 Mark

はい、あなたの答えは、私がd3で取り組んできたものにもっとよく似ています。ありがとうございました！ – konrad

まず、あなたがg要素を作成する必要はありません（これは、単に物事をより読みやすくなります）

var legend_row_height = 50;

ファイルの先頭にすべての測定値と値を移動し、それらを参照します。

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

をとCSSにあなたのスタイリングを移動：だけではなく、翻訳のx,y属性を持つ長方形やテキストを配置。これは、最も簡単にオブジェクトのクラスを設定することによって達成される：

.classed("squares", 1)

その後、CSS追加：MatthewWilcoxsonの答え@

.squares { 
    stroke: white; 
}

出典

2016-10-06 18:04:15

先生、あなたは右の上のすべてですアカウント。私は 'g'の作成を取り除き、あなたの提案ごとに' attr（ "y"） 'を使用しました。また、 'g'ブロックを削除することは、「太字」効果を修正したようです。 – konrad

d3.jsで凡例を作成

答えて

関連する問題