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

편집 :

날 귀찮게 또 한가지. 어떤 이유로 든 내 스타일이 모두 굵은 것처럼 보입니다. 나는 어떤 스타일도 정의하지 않았다. 기본 동작입니까?

출처

2016-10-06 konrad

MatthewWilcoxson의 대답은 좋다, 그러나 여기에서 더 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를 추가 :

.squares { 
    stroke: white; 
}

출처

2016-10-06 18:04:15

가 실제로 선생님, 당신에 대한 모든 권리입니다 계정. 나는'g' 생성을 제거하고 여러분의 제안에 따라'attr ("y")를 사용했다. 또한'g' 블록을 제거하면 "대담한"효과가 수정 된 것 같습니다. – konrad

d3.js로 범례 만들기

답변

관련 문제