javascript d3渲染图 [英] javascript d3 render chart

问题描述

我正在尝试学习一些用于前端Web开发的图表呈现技术。 有一个d3教程，您可以在网站（非常适合学习），而我正尝试使用自己的数据。在教程网站中，我尝试修改rawgit

I am trying to learn some chart rendering techniques for front end web development. There is a d3 tutorial where the javascript function can be edited on the website (great for learning purposes) and I am attempting to use my own data instead. In the tutorial website I am attempting to modify the rawgit

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

和我自己的rawgit数据集：

with my own rawgit dataset:

//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",

我要注意的是每小时数据并且教程数据是每日的。.因此，我需要使用时间解析功能进行任何修改吗？

One thing to note is my data is hourly and the tutorial data is daily.. So would I need to modify anything with the time parse function?

  // When reading the csv, I must format variables:
  function(d){
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

我正在尝试关注该学习JavaScript网站，该网站讨论了 timeParse ，但没有nyluck ...有人给我个提示吗？

I am trying to follow this learn javascript site that talks about timeParse but not having anyluck... Could anyone give me a tip?

还要提及我的数据集，时间戳/索引列是 Date 而不是 date 并且数据是 kW 而不是 value ...我

Also to mention my dataset the timestamp/index column is Date not date and the data is kW not value... Do I need to modify the tutorial code to accommodate for this as well?

推荐答案

我想我真的想通了。至少我得到了要在教程网站上呈现的图表...将 timeParse 函数更改为：

I think I actually figured this out. At least I got the chart to render on the tutorial site... Changing the timeParse function to this:

//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",

  // When reading the csv, I must format variables:
  function(d){
    return { date : d3.timeParse("%m/%d/%Y %H:%M")(d.Date), value : d.kW }
  },

这篇关于javascript d3渲染图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！