Question

我试图显示json数据，这是我从一个从数据库中提取数据的php脚本中获取的。我只对时间感兴趣（在脚本中称为vrijeme），例如这样：

data[0].vrijeme
//output: 00:09:27

现在我试图在x轴上获取这个时间数据，这样我就可以创建一个条形图。 x轴具有24h域，应根据data [i] .vrijeme值创建一个bar。因此，如果值为00:09:27，则应在该特定时间创建图表上的条形图。

我不确定我是否以正确的方式这样做。

有人可以查看代码并告诉我我做错了什么。我是d3.js的新手，我正在努力奋斗。我一直在firefox控制台中收到此错误：

uncaught exception: out of memory <unknown>
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create d3.min.js:3:9846
Unexpected value NaN parsing y attribute. d3.min.js:1:0
Unexpected value NaN parsing height attribute. d3.min.js:1:0

Chrome控制台中出现此错误：

Error: Invalid value for <rect> attribute y="NaN"
Error: Invalid value for <rect> attribute height="NaN"

这是js部分：

    var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 40
},
width = 800,
    height = 500;


var today = new Date();
today.setHours(0, 0, 0, 0);
todayMillis = today.getTime();

d3.json("getDataFromDB.php", function(error, data) {

   var i = 0;
    data.forEach(function(d) {
        var parser = d3.time.format("%H:%M:%S");


        var dejt = parser.parse(data[i].vrijeme);


        i++;
        var timePeriodMillis = (parseInt(dejt.getHours(), 10) * 60 * 60 * 1000) +
                               (parseInt(dejt.getMinutes(), 10) * 60 * 1000) + 
                               (parseInt(dejt.getSeconds(), 10) * 1000);

        d.time = new Date();
        d.time.setTime(todayMillis + timePeriodMillis);
    });


var x = d3.time.scale()
    .domain(d3.extent(data, function(d) { return d.time; }))
    .nice(d3.time.day, 1)
    .rangeRound([0, width - margin.left - margin.right]);

var y = d3.scale.linear()
    .domain([0, 2])
    .range([height - margin.top - margin.bottom, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.hours, 2)
    .tickFormat(d3.time.format('%H:%M'))
    .tickSize(0)
    .tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .tickPadding(8)
    .tickFormat(function (d) {
    return '';
});

var svg = d3.select('#bar-chart').append('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

svg.selectAll('.chart')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function (d) {
        return x(d.time);
    })
    .attr('y', function (d) {
        return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total))
    })
    .attr('width', 10)
    .attr('height', function (d) {
        return height - margin.top - margin.bottom - y(d.total)
    });

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
    .call(xAxis);

svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis);

svg.append("text")
    .attr("x", -25)
    .attr("y", 430)
    .style("text-anchor", "middle")
    .text("Off");

svg.append("text")
    .attr("x", -25)
    .attr("y", 220)
    .style("text-anchor", "middle")
    .text("On");

    });

我为凌乱的代码道歉。

不能在条形图24h x轴d3 js上显示json数据

0 个答案: