d3.js - svg의 json 파일에서 읽는 사각형 추가하기

Question

svg에 범례를 추가했습니다. 각 범례 그룹에 대해 서로 다른 json 파일에서 데이터를 읽습니다. 나는 같은 svg에서 직사각형을 그려 넣고 싶다. 그러나 단 한 세트의 전설이 추가되고 있습니다. 첫 번째 json 데이터 만 사각형으로 그려집니다. 두 번째는 무시됩니다.

내 코드는 다음과 같습니다

svgcheckins= d3.select("#legend").append("svg").attr("id","svgcheckins") 
.attr("width", 250) 
.attr("height", 200) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.json("checkins.json", function(data) 

    { 
     CreateLegend('#legend',svgcheckins,"checkins",data,'A - Checkins',''); 
    }); 




    d3.json("builds.json", function(data) 

{ 
    CreateLegend('#legend',svgcheckins,"Builds",data,'B - Builds',''); 
}); 

function CreateLegend(div,svg,svgid,data,header,trail) 
{ 

    var traillength=0; 
    var svgelem; 


jsondata = data; 

console.log(data); 

rectangle= svg.selectAll("rect").data(data).enter().append("rect"); 
    var RectangleAttrb = rectangle 

        .attr("id", function (d,i) { return svgid + "id" + i ; }) 
        .attr("x", function (d) { return d.x_axis; }) 
        .attr("y", function (d) { return d.y_axis; }) 
        .attr("width",function(d) { return d.width; }) 
        .attr("height",function(d) { return d.height; }) 
        .style("stroke", function (d) { return d.border;}) 
        .style("fill", function(d) { return d.color; }); 





     var textparam = svg.selectAll("text").data(data).enter().append("text"); 

     var yearheader = d3.select("#header"); 

    if(yearheader.empty()) 
    { 

     var textheader = svg.append("text").attr("dx",20).attr("dy",5).text(header).attr("id",header).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;") 
    } 

     if (trail.length == 0) 
    { 

      d3.select(header).attr("style","font-size:15.1px;text-decoration:underline"); 

    } 


    var text = textparam .attr("x", function (d) { traillength = d.x_axis + d.width +10; return d.x_axis + d.width +10; }) 
        .attr("y", function (d) { return d.y_axis + d.height-5; }) 
        .attr("width",30) 
        .attr("height",20) 
        .attr("style", "text-decoration:none") 
        .text(function(d) { return d.text; }); 


var yearheader = d3.select("#trail"); 


if (trail.length > 0 && yearheader.empty()) 
    { 

    svg.append("text").attr("id","trail").attr("dx",traillength-10).attr("dy",5).text(trail).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;") 
    } 

}

JSON 데이터는 다음과 같습니다

checkins.json 

[ 
    { "x_axis":10, "y_axis": 10,"width":20,"height":15,"color" : "#FE2E2E","border":"#000000"}, 
    { "x_axis":30, "y_axis": 10,"width":20,"height":15,"color" : "#FE9A2E","border":"#000000"}, 
    { "x_axis":50, "y_axis": 10,"width":20,"height":15,"color" : "#FFFF00","border":"#000000"}, 
    { "x_axis":70, "y_axis":10,"width":20,"height":15,"color" : "#D0FA58","border":"#000000"}, 
    { "x_axis":90, "y_axis":10,"width":20,"height":15,"color" : "#01DF01","border":"#000000"} 


] 

builds.json 

[ 
    { "x_axis":10, "y_axis":60,"width":20,"height":15,"color" : "#424242","border":"#000000"}, 
    { "x_axis":30, "y_axis":60,"width":20,"height":15,"color" : "#D8D8D8","border":"#000000"}, 
    { "x_axis":50, "y_axis":60,"width":20,"height":15,"color" : "#FFFF00","border":"#000000"}, 
    { "x_axis":70, "y_axis":60,"width":20,"height":15,"color" : "#FAFAFA","border":"#000000"}, 
    { "x_axis":90, "y_axis":60,"width":20,"height":15,"color" : "#81DAF5","border":"#000000"} 
] 

Answer 1

이는 D3의 데이터 작업을 일치하는 방법이다. 특히, 나는 다음 줄을 말하는 겁니다 :

이

rectangle= svg.selectAll("rect").data(data).enter().append("rect"); 

이 모든 rect 요소를 선택하고 그들에게 data 일치합니다. 첫 번째 범례에는 rect이 없으므로 아무 것도 일치하지 않으며 원하는대로 작동합니다. 그러나 이미 rect이있는 경우 data과 일치하며 입력 항목이 비어 있습니다. D3은 기본적으로 배열 색인을 기반으로하기 때문에 일치합니다.

기본적으로이 문제를 해결하는 데는 두 가지 방법이 있습니다. 두 번째 인수 인 .data()을 사용하여 D3에 일치 방법을 알리거나 .selectAll()에 사용할 생성 된 범례에 고유 한 클래스를 할당 할 수 있습니다. 데이터에 구별되는 속성이없는 것 같습니다.

rectangle= svg.selectAll("rect." + svgid).data(data).enter().append("rect"); 
rectangle.attr("class", svgid); 
// rest of code