使用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