javascript - 在 pre 标记内读取 jsFiddle 的 csv

Question

我正在尝试通过 jsFiddle 创建堆叠条形图可视化。我已将数据输入到一些 pre 标记中，但是，当我尝试显示可视化效果时，我没有看到任何内容。

有什么想法可能会发生什么吗？

示例在这里:http://jsfiddle.net/9pom9mu3/

Answer 1

您尝试访问数据的方式存在一些小问题。

1. text() is a function provided on D3 selections ，而不是一个属性。因此，为了从 <pre id='data_csv'>...</pre> 中提取文本值，你需要做d3.select('#data_csv').text() .

2. 您正在使用d3.csv.parse ，它接受一个字符串作为输入，因此是同步的。因此，您不必将函数作为参数传递给它，而只需获取返回值。

   var data = d3.csv.parse(d3.select('#data_csv').text());
   

3. 您的数据以逗号和空格分隔(即 ", " )，而不仅仅是逗号分隔( "," )。另外，每排前面还有四个空格。试试这个:

   <pre id='data_csv'>Variable,Year,Country
   36,1996,Canada
   34,1996,Mexico
   38,1998,Canada
   32,1998,Mexico
   42,2002,Canada
   37,2002,Mexico
   </pre>
   

如果您进行这些更改，data看起来像这样:

[{"Variable":"36","Year":"1996","Country":"Canada"},
 {"Variable":"34","Year":"1996","Country":"Mexico"},
 {"Variable":"38","Year":"1998","Country":"Canada"},
 {"Variable":"32","Year":"1998","Country":"Mexico"},
 {"Variable":"42","Year":"2002","Country":"Canada"},
 {"Variable":"37","Year":"2002","Country":"Mexico"}]

请注意，您的 fiddle 仍然存在一些问题，导致您的条形图无法显示。例如，没有“奖牌数”或“性别”数据，这些数据在很多地方都使用。