Question

您好我在d3中使用大型json文件，大约75 KB。它似乎适用于32个数据对象，但后来我在控制台中得到错误无法读取属性＆＃39;长度＆＃39;未定义的。看起来我的json是好的，因为我把它放在http://jsonlint.com/中并且它已经过验证。我知道这里有类似的问题，但我是d3的新手，所以不知道如何修改代码。我认为这可能与d3如何从我的json文件中获取数据有关这是完整的d3代码：

function truncate(str, maxLength, suffix) {
if(str.length > maxLength) {
    str = str.substring(0, maxLength + 1); 
    str = str.substring(0, Math.min(str.length, str.lastIndexOf(" ")));
    str = str + suffix;
}
return str;
}

var margin = {top: 20, right: 200, bottom: 0, left: 20},
    width = 300,
    height = 650;

var start_year = 2004,
    end_year = 2013;

var c = d3.scale.category20c();

var x = d3.scale.linear()
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

var formatYears = d3.format("0000");
xAxis.tickFormat(formatYears);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", margin.left + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("data.json", function(error, data) {
        if (error) throw error; 

x.domain([start_year, end_year]);
var xScale = d3.scale.linear()
    .domain([start_year, end_year])
    .range([0, width]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 0 + ")")
    .call(xAxis);

console.log(data.length);   
var len = data.length;
for (var j = 0; j < len; j++) {
    // try{
    var g = svg.append("g").attr("class","journal");

    var circles = g.selectAll("circle")
        .data(data[j]['articles'])
        .enter()
        .append("circle");

    var text = g.selectAll("text")
        .data(data[j]['articles'])
        .enter()
        .append("text");

    var rScale = d3.scale.linear()
        .domain([0, d3.max(data[j]['articles'], function(d) { return d[1]; })])
        .range([2, 9]);

    circles
        .attr("cx", function(d, i) { return xScale(d[0]); })
        .attr("cy", j*20+20)
        .attr("r", function(d) { return rScale(d[1]); })
        .style("fill", function(d) { return c(j); });

    text
        .attr("y", j*20+25)
        .attr("x",function(d, i) { return xScale(d[0])-5; })
        .attr("class","value")
        .text(function(d){ return d[1]; })
        .style("fill", function(d) { return c(j); })
        .style("display","none");

    g.append("text")
        .attr("y", j*20+25)
        .attr("x",width+20)
        .attr("class","label")
        .text(truncate(data[j]['name'],30,"..."))
        .style("fill", function(d) { return c(j); })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
    // }
    // catch(err){
    //  console.log(err);
    //  continue;
    // }
};

function mouseover(p) {
    var g = d3.select(this).node().parentNode;
    d3.select(g).selectAll("circle").style("display","none");
    d3.select(g).selectAll("text.value").style("display","block");
}

function mouseout(p) {
    var g = d3.select(this).node().parentNode;
    d3.select(g).selectAll("circle").style("display","block");
    d3.select(g).selectAll("text.value").style("display","none");
}


});

示例json：

[{"articles":[[2004,25],[2005,25],[2006,26],[2007,31],[2008,20],[2009,26],[2010,19],[2011,18],[2012,24],[2013,17]],"total": 231,"name": " Acta Inf. " }, 
{"articles":[[2008,1]],"total": 1,"name": " nf. " }, 
{"articles":[[2005,27],[2006,30],[2007,27],[2008,75],[2009,31],[2010,34],[2011,46],[2012,35],[2013,60]],"total": 365,"name": " Displays " }, 
{"articles":[[2010,20],[2011,16],[2012,16]],"total": 52,"name": " IJKDB " }, 
{"articles":[[2004,61],[2005,70],[2006,72],[2007,71],[2008,79],[2009,65],[2010,80],[2011,77],[2012,82],[2013,121]],"total": 778,"name": " Computers in Industry " }, 
{"articles":[[2010,1]],"total": 1,"name": " rs in Industry " }, 
{"articles":[[2005,1]],"total": 1,"name": " ry " }, ...

编辑：不再在控制台中收到错误，我的JSON出现了问题。但是仍然没有显示可视化中的所有条目，这里是我的整个JSON文件https://api.myjson.com/bins/425wh

编辑2：现在全部显示！所有的数据都在那里但是没有显示，因为d3画布的高度太小

Answer 1

问题出在最后一个条目中。最后一个条目是一个正确的数组，它应该是一个对象，因此您的数据集在最后一条记录中的数组中有数组。您需要展平数据集阵列。

从AJAX获取数据后添加此内容。

data = [].concat.apply([], data);//this will flatten all your array within array into a single array of records,

修改

第二个问题：

我只看到一些实际出现的？例如，名为“人工智能教育”的期刊没有出现。

问题是svg高度越小，要显示的数据就越多，它会在30条记录后切断。

所以有这样的动态高度：

d3.select("body svg").attr("height",len*20.2);//20.2 is approx height of one element

现在高度将取决于需要显示的数据长度。

我已相应地更新了小提琴

工作代码here。

d3 TypeError：无法读取属性＆＃39; length＆＃39;未定义的

1 个答案:

修改