Показать сообщение отдельно
  #1 (permalink)  
Старый 01.11.2015, 23:07
Новичок на форуме
Отправить личное сообщение для isantel Посмотреть профиль Найти все сообщения от isantel
 
Регистрация: 20.01.2014
Сообщений: 4

d3.js изменение шаблона под свои данные
Мучаюсь неделю, не могу изменить данный пример http://bl.ocks.org/mbostock/3943967 под свои данные.

Пример кода

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>

Последний раз редактировалось isantel, 01.11.2015 в 23:21.
Ответить с цитированием