Javascript d3矩形不附加

我是d3新手，正在尝试根据存储在MySQL数据库中的数据绘制矩形。以下是脚本：

function populate_isoforms(data){

var min_locus = parseInt(data[0].protein_dat.min_locus);
var max_locus = parseInt(data[0].protein_dat.max_locus);
var num_isoforms = parseInt(data[0].protein_dat.num_isoforms);

data = data[0].isoforms;

for (var key in data) {
if (data.hasOwnProperty(key)) {
var val = data[key];
var loci = val.loci;
console.log(val.loci[0].s)

var width = $(window).width()-50;
var height = 100;

var widthScale = d3.scale.linear()
.domain([min_locus,max_locus])
.range([0,width]);
var svgContainer = d3.select("body").append("svg")
.attr("width", width)
.attr("height", 20);
var boxes = svgContainer.selectAll("g")
.data(loci)
.enter()
.append("g");
var box_attrs = boxes.selectAll("g")
.data(function(d){return d;})
.enter().append("rect")
.attr("x",function(d){return widthScale(d.s);})
.attr("y",10)
.attr("stroke","red")
.attr("width", function(d){return widthScale(d.e);})
.attr("fill","grey")
.attr("height", 15);
}
}

}

数据格式如下所示：

蛋白质dat:{“max_位点”：“43535079”，“min_位点”：“43530174”，“num_亚型”：2}，“亚型”：[{“位点”：“s”：“43530174”，“e”：“43530474”}，{“s”：“43532633”，“e”：“43532757”}，{“s”：“43533608”，“e”：“43533772”}，{“s”：“435343534641”，“e”：“43534737”}，{“s”：“s”：“4353522”，“e”：“4353545737”}，{“：”43530474“}，{”s“：”43532633“，”e“：”43532757“}，{”s“：”43533608“，”e“：”43533772“}，{”s“：”43534641“，”e“：”43534737“}，{”s“：”43535022“，”e“：”43535079“，”name“：”uc002xmu.3”}]

---

我遇到的问题是没有显示任何内容，因为没有rect元素附加到g元素。我相信这很简单，但我不能让它工作。任何帮助都会很好。谢谢。

看起来对

.data（）

的嵌套调用应该是

.data（函数（d）{return d.isoforms；}）

然后是另一个嵌套调用？你到底想策划什么？谢谢Lars。我用console.log在嵌套的.data（）中打印了d，它给了我：Object{s:“43530174”，e:“43530474”}test2.html:107 Object{s:“43532633”，e:“43532757”}test2.html:107 Object{s:“43533608”，e:“43533772”}test2.html:107 Object{s:“43534641”，e:“43534737”}test2.html:107 Object s:“435335022”，e:“43535079}这是我想要的。问题是没有附加矩形。这是包含负责蛋白质编码转录本的dna序列起始和结束位置的生物数据。我只想为每个区域绘制一个矩形。。。但它应该是这样的：……您是否尝试过

框。选择全部（“rect”）

？我尝试过，但没有成功。DOM看起来是一样的。