Question

我想任何监听d3问题的人都会习惯在本周看到我（这是我第一次使用d3）所以这里有另一个问题。我通过php / ajax获取数据，但我已经将样本作为硬代码放在下面。我希望将fineBinSummary数据绑定到条形图，但似乎无法弄清楚如何。当我检查html时，它会设置svg，然后在我开始尝试将数据绑定到它时停止。

我成功绑定了详细数据（代码未显示，只是JSON），但无法以相同的方式获取fineBinSummary数据。我还需要提取fineBinSummary数组的长度（你可以看到我刚刚将它设为宽度/ 5但是图表中并不总是有5个条形。非常感谢任何帮助。

(document).ready(function() {

var data = [
    {"Id":"93439440411",

        "detail":[{"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"-21000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"16000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"-15000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"24000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-141000.0","y":"27000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-140000.0","y":"-15000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"}],

        "fineBinSummary":[{"fineBin":"UNCLASSIFIED","count":8212},{"fineBin":"SMALL_PARTICLE","count":104},{"fineBin":"RESIDUE","count":68},
            {"fineBin":"FALSE","count":16},{"fineBin":"258","count":12}]},

    {"Id":"93439440419",

        "detail":[{"fineBin":"UNCLASSIFIED","x":"-142839.40900000001","y":"20448.394","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142546.65599999999","y":"26731.720000000001","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142499.136","y":"-24443.516","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142267.68799999999","y":"32411.870999999999","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"},
            {"fineBin":"UNCLASSIFIED","x":"-142000.0","y":"-33000.0","imageId":null,"serverId":null,"fileSpec":null,"color":"HotPink"}],

        "fineBinSummary":[{"fineBin":"UNCLASSIFIED","count":8212},{"fineBin":"SMALL_PARTICLE","count":104},{"fineBin":"RESIDUE","count":68},
                            {"fineBin":"FALSE","count":16},{"fineBin":"258","count":12}]}]

//Constants

var squareSide = 400;
var height = squareSide / 2.0;
var barWidth = squareSide / 5;

//begin building bootstrap courousel stack
var slides = d3.select(".carousel-inner").selectAll('div')
    .data(data)
    .enter()
    .append("div")
    .attr("class","item")
    .append("div")
    .attr("class","container-fluid")
    .append("div")
    .attr("class","row");

//Make the first slide the active slide
d3.selectAll(".item").classed('active', function(d, i) { return i == 0; });

//Build the image side of the slide
var imageSide = slides.append("div")
    .attr("class","col-lg-6 wafer-and-pareto");


//build final location for div that will hold the histogram
var paretoBox = imageSide.append("div")
    .attr("class","row")
    .append("div")
    .attr("class","col-lg-12")
    .append("div")
    .attr("class","pareto-box")
    .append("svg")
    .attr("class","chart")
    .attr("width",squareSide)
    .attr("height",squareSide / 2.0);

基于查看html但似乎没有成功执行以下代码，似乎正在努力实现这一点：

var bar = paretoBox.selectAll("g")
    .data(function(d) {return data.fineBinSummary})
    .enter()
    .append("g")
    .attr("transform",function(d,i) {
        return "translate(" + i * barWidth + ",0)";
    });

bar.append("rect")
    .attr("y",function(d) {
        return y(d.count);
    })
    .attr("height",function(d) {
        return height - y(d.count)
    })
    .attr("width",barWidth - 1);

var y = d3.scale.linear()
    .range([height,0])
    .domain([0,d3.max(data.fineBinSummary,function(d) {
        return d.count;
    })]);

}）

Answer 1

您的代码只有两个小问题。首先，在嵌套选择中，您将引用原始数据而不是绑定到当前元素的部分。而不是

var bar = paretoBox.selectAll("g")
  .data(function(d) {return data.fineBinSummary})

使用

var bar = paretoBox.selectAll("g")
  .data(function(d) {return d.fineBinSummary})

其次，您的比例的最大元素确定不正确 - data没有fineBinSummary成员。代码应如下所示：

var y = d3.scale.linear()
  .range([height,0])
  .domain([0, d3.max(data, function(d) {
    return d3.max(d.fineBinSummary, function(e) { return e.count; });
  })]);

麻烦绑定d3.js中的JSON子数组

1 个答案: