使用d3.js和Ruby on Rails在折線圖中顯示信息

Question

這是我第一次來這里，因為我總是在stackoverflow中找到所需的答案，但是這一次我找到了一些答案，但是沒有任何效果...

因此，我試圖在我的ruby項目中使用d3.js，但是我發現在項目中顯示折線圖時遇到問題。 我正在使用json數據創建具有2個值（千克和日期）的圖形，但是出現以下錯誤：

<path> attribute d: Expected number, "MNaN,236.32LNaN,2…

使用以下命令從控制器中的JSON調用加載數據：

 format.json { render json: @kilograms }

@kilograms是具有all方法的變量：

@kilograms = Kilogram.all

這是公斤.js中的代碼。

$(document).ready(function(){
  loadKilogramGraphic();
});


var loadKilogramGraphic = function() {
                        $.ajax({
                          type: 'GET',
                          url: '/kilograms',
                          contentType: 'application/json; charset=utf-
8',
                          dataType: 'json',
                          success: function(data){
                            drawKiloGraph(data);
                          },
                          failure: function(result){
                            error();
                          }
                        });
                      };

function error() {
    console.log("Something went wrong!");
} 


// set plot parameters
var width = 200;
var height = 280;

function drawKiloGraph(data) {

  var maxKilogram = d3.max(data, function(d) { return d.kg });
  var maxDate = d3.max(data, function(d) { return d.kg_date });
  var minDate = d3.min(data, function(d) { return d.kg_date });



  function sortByDateAscending(a, b) {
    // Dates will be cast to numbers automagically:
    return a.kg_date - b.kg_date;
  }

  // scaling the graph
  var y = d3.scaleLinear()
                 .domain([0, maxKilogram])
                 .range([height, 0]);

  var x = d3.scaleTime()
                 .domain([minDate, maxDate])
                 .range([0, width]);

  // Adding the axis
  var yAxis = d3.axisLeft(y);
  var xAxis = d3.axisBottom(x);

  // Adding svg in html
  var svg = d3.select('body').append('svg')
              .attr('height', '100%')
              .attr('width', '100%');

  // Group in svg
  var chatGroup = svg.append('g')
                      .attr('transform', 'translate(100, 50)');

  // Puting data in line
  var line = d3.line()
                  .x(function(d){ return x([d.kg_date]);})
                  .y(function(d){ return y([d.kg]);});

  // Creating the path
  chatGroup.append("path").attr("d", line(data));
  chatGroup.append('g').attr('class', 'x axis')
                      .attr('transform', 'translate(0, 
                       220)').call(xAxis);
  chatGroup.append('g').attr('class', 'y axis').call(yAxis);


};

感謝您抽出寶貴的時間！ 我是大三！

Answer 1

同樣，您還沒有真正向我們展示JSON的樣子。 假設這樣的結構：

var data = [{
  kg_date: new Date('2018-03-01'),
  kg: Math.random() * 10
}, {
  kg_date: new Date('2018-03-02'),
  kg: Math.random() * 10
}, {
  kg_date: new Date('2018-03-03'),
  kg: Math.random() * 10
}, {
  kg_date: new Date('2018-03-04'),
  kg: Math.random() * 10
}, {
  kg_date: new Date('2018-03-05'),
  kg: Math.random() * 10
}];

您的問題確實是我在評論中指出的。 此外，繪圖的位置，邊距，高度和寬度有些偏離。 我通常從這個例子開始，以正確地掌握基本立場。

話雖如此，這里已經清理了：

 <!DOCTYPE html> <html> <head> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> // set plot parameters var width = 300; var height = 280; var margin = { top: 20, right: 20, bottom: 30, left: 40 }; var data = [{ kg_date: new Date('2018-03-01'), kg: Math.random() * 10 }, { kg_date: new Date('2018-03-02'), kg: Math.random() * 10 }, { kg_date: new Date('2018-03-03'), kg: Math.random() * 10 }, { kg_date: new Date('2018-03-04'), kg: Math.random() * 10 }, { kg_date: new Date('2018-03-05'), kg: Math.random() * 10 }]; drawKiloGraph(data); function drawKiloGraph(data) { var maxKilogram = d3.max(data, function(d) { return d.kg }); var maxDate = d3.max(data, function(d) { return d.kg_date }); var minDate = d3.min(data, function(d) { return d.kg_date }); function sortByDateAscending(a, b) { // Dates will be cast to numbers automagically: return a.kg_date - b.kg_date; } // Adding svg in html var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); width = width - margin.left - margin.right, height = height - margin.top - margin.bottom; // scaling the graph var y = d3.scaleLinear() .domain([0, maxKilogram]) .range([height, 0]); var x = d3.scaleTime() .domain([minDate, maxDate]) .range([0, width]); // Adding the axis var yAxis = d3.axisLeft(y); var xAxis = d3.axisBottom(x); // Group in svg var chatGroup = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // Puting data in line var line = d3.line() .x(function(d) { return x(d.kg_date); }) .y(function(d) { return y(d.kg); }); // Creating the path chatGroup.append("path").attr("d", line(data)) .style('fill', 'none') .style('stroke', 'steelblue'); chatGroup.append('g').attr('class', 'x axis') .attr('transform', 'translate(0, ' + (height) + ')') .call(xAxis); chatGroup.append('g').attr('class', 'y axis').call(yAxis); }; </script> </body> </html>

使用d3.js和Ruby on Rails在折線圖中顯示信息

問題描述

1 個解決方案

解決方案1
0 2018-03-25 14:17:12

使用d3.js和Ruby on Rails在折線圖中顯示信息

問題描述

1 個解決方案

解決方案1 0 2018-03-25 14:17:12

解決方案1
0 2018-03-25 14:17:12