0

Постоянно выходит одна и та же ошибка

Error: Invalid value for attribute d="MNaN, и так еще много много строк

вот мой код

<body>
<div class="container">

    <div class="jumbotron">

        <svg id="visualisation" width="1000" height="500"></svg>
    </div>
</div>
        <script>
            function getDate(d) {
                return new Date(d.RateDay);
            }
            function InitChart() {

                var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Data));
                data = JSON.parse(data);

                var parseDate = d3.time.format("%d%m%Y");
                data.forEach(function(d){

                    d.RateDay = parseDate(getDate(d)) ;

                });
                var dataGroup = d3.nest()
                    .key(function (d) {
                        return d.Currency;
                    }).entries(data);

            var vis = d3.select("#visualisation"),
                    WIDTH = 1000,
                    HEIGHT = 500,
                    MARGINS = {
                        top: 20,
                        right: 20,
                        bottom: 20,
                        left: 50
                    },
                    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) {
                        return d.year;
                    }), d3.max(data, function(d) {
                        return d.year;
                    })]),
                    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) {
                        return d.sale;
                    }), d3.max(data, function(d) {
                        return d.sale;
                    })]),
                    xAxis = d3.svg.axis()
                    .scale(xScale),
                    yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left");
            vis.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);
            vis.append("svg:g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);
            var lineGen = d3.svg.line()
                .x(function(d) {
                    console.log(d.RateDay);
                    return xScale(d.RateDay);
                })
                .y(function(d) {
                    console.log(d.Value);
                    return yScale(d.Value);
                })
                .interpolate("basis");
            dataGroup.forEach(function(d, i) {
                vis.append('svg:path')
                    .attr('d', lineGen(d.values))
                    .attr('stroke', 'blue')
                    .attr('stroke-width', 2)
                    .attr('fill', 'none');
            });
            }
            InitChart();
        </script>
        </body>
1
  • У вас же тут javascript, а это @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Data)); откуда в нем? Или я чего-то не понимаю? О_о
    – Visman
    25 сен 2015 в 5:30

1 ответ 1

1

Судя по коду, вы правильно генерируете график. Хотя, конечно, есть вопросы по оптимальности. Уверен на 99%, что ошибка в формате данных. Может быть, вы неправильно получаете дату. Важно понимать, что NaN в js возвращается тогда, когда вы пытаетесь конвертировать не число в число, например, строку, в которой нет числовых символов - parseInt('lol'). Тут также - генератор lineGen при генерации пути обнаруживает непонятные данные и возвращает NaN. Для большего понимания графиков, я сделал пример простейшего графика на d3 вот здесь.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.