| isantel | 01.11.2015 23:07 |
d3.js изменение шаблона под свои данные
Мучаюсь неделю, не могу изменить данный пример http://bl.ocks.org/mbostock/3943967 под свои данные.
Пример кода
и такое повторяется несколько сотен раз.
Я так понимаю что не правильно определяется ось Х
http://itmages.ru/image/view/3158517/66db4be1
Что я делаю не так, по возможности покажите на моем примере
CDN ссылки
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Пример кода
var data = {
"ticks": [
[
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
],
[
"10/26/2015 09:36",
298
]
],
[
[
"10/26/2015 01:01",
228
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 05:39",
297
],
[
"10/26/2015 11:39",
117
],
[
"10/26/2015 11:39",
252
],
[
"10/26/2015 11:39",
252
],
[
"10/26/2015 11:39",
117
]
],
[
[
"10/26/2015 01:44",
41
],
[
"10/26/2015 01:44",
41
],
[
"10/26/2015 02:08",
41
],
[
"10/26/2015 02:08",
41
],
[
"10/26/2015 03:05",
101
],
[
"10/26/2015 03:05",
101
],
[
"10/26/2015 03:12",
107
]
]
]
};
var ticks = data.ticks,
parseDate = d3.time.format("%d/%m/%Y %H:%M").parse;
$.each(ticks, function (i, series) {
$.each(series, function (i, d) {
d.y = +d[1];
d.x = parseDate(d[0]);
});
});
console.log(ticks);
var n = ticks.length, // number of layers
m = 21, // number of samples per layer (макс колво элементов)
stack = d3.layout.stack(),
// layers = stack(d3.range(n).map(function () {
// return bumpLayer(m, .1);
// })),
layers = stack(ticks), // stack all layout
yGroupMax = d3.max(layers, function (layer) { // max element in all arrays
return d3.max(layer, function (d) {
return d.y;
});
}),
yStackMax = d3.max(layers, function (layer) {
return d3.max(layer, function (d) {
return d.y0 + d.y;
});
});
var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .08);
// console.log(x);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var xAxis = d3.svg.axis()
.scale(x)
// .tickFormat(d3.time.format("%d/%m/%Y %H:%M"))
.tickSize(0)
.tickPadding(6)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function (d, i) {
return color(i);
});
var rect = layer.selectAll("rect")
.data(function (d) {
return d;
})
.enter().append("rect")
.attr("x", function (d) {
return x(d.x);
})
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0);
rect.transition()
.delay(function (d, i) {
return i * 10;
})
.attr("y", function (d) {
return y(d.y0 + d.y);
})
.attr("height", function (d) {
return y(d.y0) - y(d.y0 + d.y);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// d3.selectAll("input").on("change", change);
//
// var timeout = setTimeout(function () {
//// d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
// }, 2000);
//
// function change() {
// clearTimeout(timeout);
// if (this.value === "grouped") transitionGrouped();
// else transitionStacked();
// }
//
// function transitionGrouped() {
// y.domain([0, yGroupMax]);
//
// rect.transition()
// .duration(500)
// .delay(function (d, i) {
// return i * 10;
// })
// .attr("x", function (d, i, j) {
// return x(d.x) + x.rangeBand() / n * j;
// })
// .attr("width", x.rangeBand() / n)
// .transition()
// .attr("y", function (d) {
// return y(d.y);
// })
// .attr("height", function (d) {
// return height - y(d.y);
// });
// }
//
// function transitionStacked() {
// y.domain([0, yStackMax]);
//
// rect.transition()
// .duration(500)
// .delay(function (d, i) {
// return i * 10;
// })
// .attr("y", function (d) {
// return y(d.y0 + d.y);
// })
// .attr("height", function (d) {
// return y(d.y0) - y(d.y0 + d.y);
// })
// .transition()
// .attr("x", function (d) {
// return x(d.x);
// })
// .attr("width", x.rangeBand());
// }
Error: Invalid value for <rect> attribute height="NaN" Error: Invalid value for <rect> attribute y="NaN"
и такое повторяется несколько сотен раз.
Я так понимаю что не правильно определяется ось Х
http://itmages.ru/image/view/3158517/66db4be1Что я делаю не так, по возможности покажите на моем примере
CDN ссылки
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>