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()中使用的已创建图例指定一个区别类。您的数据似乎没有任何区别属性，但您可以使用svgid来实现此目的：

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

d3.js - 在svg中添加从json文件读取的矩形

1 个答案: