平移d3条形图并仅显示一系列值

时间：2015-11-14 21:46:07

标签： javascript d3.js charts

我是d3的新手，最后让我的图表工作。

但现在我有动态输入，并希望图表只显示一定范围的值。

似乎我有一些隐藏的错误阻止它全部工作。 也许是因为我正在绘制具有相同功能的多个图表？ 什么是解决这个问题的更好方法？

我希望有3个（或更多）图表呈现可能不同的范围（比如x轴上7天，30天和90天）和/或平移它们。 现在这似乎是不可能的，因为平移需要调用draw（）函数，我修改了（如你所见）。

此外，如果我更改域以显示所有值，则没有任何错误。 如果我将其改为[小于最大值]，我会得到错误（x = NaN）。

我怎样才能只显示前X值，丢弃所有值？ 或者只是＆＃34;没有显示＆＃34;他们能够向两侧平移并展示它们吗？ 在示例中，它看起来很简单，但我无法使其工作。

这是当前的代码

$(document).ready(function() {

var statData = [{
"level": 0,
    "amountTaken": 13,
    "amountCorrect": 10,
    "totalTimeTaken": 30,
    "avgTimeTaken": 2.31,
    "daysAgo": []
}, {
"level": 1,
    "amountTaken": 6,
    "amountCorrect": 5,
    "totalTimeTaken": 15,
    "avgTimeTaken": 2.5,
    "daysAgo": [{
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 1,
        "amountCorrect": 1,
        "totalTimeTaken": 2,
        "avgTimeTaken": 2
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 2,
        "amountCorrect": 2,
        "totalTimeTaken": 7,
        "avgTimeTaken": 3.5
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 3,
        "amountCorrect": 2,
        "totalTimeTaken": 6,
        "avgTimeTaken": 2
}]
}, {
"level": 2,
    "amountTaken": 5,
    "amountCorrect": 3,
    "totalTimeTaken": 12,
    "avgTimeTaken": 2.4,
    "daysAgo": [{
    "amountTaken": 5,
        "amountCorrect": 3,
        "totalTimeTaken": 12,
        "avgTimeTaken": 2.4
}]
}, {
"level": 3,
    "amountTaken": 2,
    "amountCorrect": 2,
    "totalTimeTaken": 3,
    "avgTimeTaken": 1.5,
    "daysAgo": [{
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 0,
        "amountCorrect": 0,
        "totalTimeTaken": 0,
        "avgTimeTaken": 0
}, {
    "amountTaken": 2,
        "amountCorrect": 2,
        "totalTimeTaken": 3,
        "avgTimeTaken": 1.5
}]
}];


for (var i =0; i < statData.length; i++) {
$('#statsByLevel').append('<div id="level' 
  + (i+1) + 'stats"><h1>Level ' 
  + (i+1) + '</h1></div>');
makeDiagram(i, statData[i]);
}



function makeDiagram(level, data) {

console.log('making diagram ' + level);
console.dir(data);


var MARGIN = {top: 20, right: 50, bottom: 30, left: 20};
var HEIGHT = 300 - MARGIN.top - MARGIN.bottom;
var WIDTH = 800 - MARGIN.left - MARGIN.right;
var X_DOMAIN = 90; // days
var Y_DOMAIN = 100; // percent
var BAR_WIDTH = WIDTH/X_DOMAIN;

var amountOfDays = data.daysAgo.length;

var x = d3.scale.ordinal()
  .domain(d3.range(amountOfDays))
  .rangePoints([WIDTH, 0],1);
var y = d3.scale.linear().range([HEIGHT, 0]);
//x.domain(d3.range(X_DOMAIN));
y.domain([0, Y_DOMAIN]);

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y).orient("right").ticks(5);
var xGrid = d3.svg.axis().scale(y).orient("right").ticks(5).tickSize(-WIDTH,0,0).tickFormat("");

    var canvas = d3.select("#level" + (level+1) + "stats").
  append("svg")
  .attr("width", WIDTH + MARGIN.left + MARGIN.right)
  .attr("height", HEIGHT + MARGIN.top + MARGIN.bottom)
  .attr("class", function (d, i) {
    return "chart" + i
  })
  //.call(d3.behavior.zoom().on("zoom", function() {
  //  canvas.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")")
  //}))
  .append("g")
  .attr("transform", "translate(" + MARGIN.left + "," + MARGIN.top + ")");



var bars = canvas.selectAll("rect")
  .data(data.daysAgo)
  .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("xlink:href", "http://#")
    .attr("width", BAR_WIDTH)
    .attr("height", function (d, i) {
    //console.log('amountTaken(level ' + (level+1) + '): ' + i + ": " + d.amountTaken);

    if (d.amountTaken === 0) {
      return 0;
    }

    return HEIGHT - y((d.amountCorrect/ d.amountTaken)*100);


    })
    .attr("x", function (d, i) {
    return x(i)-BAR_WIDTH/2;
    })
    .attr("y", function (d) {
    if (d.amountTaken === 0) {
      return 0;
    }
    return y((d.amountCorrect/d.amountTaken) * 100);
    })
  ;


canvas.append("g").attr("transform", "translate(0," + HEIGHT + ")").call(xAxis);
canvas.append("g").attr("transform", "translate(" + WIDTH + ",0)").call(yAxis);
canvas.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(" + WIDTH + ",0)")
  .call(xGrid);
};

它看起来像levels

在某种程度上这没关系，但我怎样才能切断＆＃34;他们，所有人只显示7（或任何其他设定数额）？可以拖延？ 也许很重要：数据不是直接从数据库中提取的，而是由jade发送到浏览器的，因此它始终是＆＃34;整个事情＆＃34;。

我希望你能理解这个问题，也许还有一两个提示:) 谢谢！

0 个答案:

没有答案
相关问题
最新问题