Question

我最近一直在玩D3.js并试图用它制作一个小地图应用程序。基本上，该应用程序将显示一张世界地图，当鼠标悬停在一个国家/地区时，下面将绘制碳排放的折线图。

geojson文件和csv文件是分开的，这意味着我必须调用一个函数来搜索csv文件中的数据，同时触发鼠标悬停事件并不难。

但问题是当我尝试绘制折线图时。我无法使用y.domain([0, d3.max(data, function(d) { return d.fookey; })])，因为我的数据如下所示：

{1990：“4768137.761”，1991：“4826703.418”，1992：“4922195.765”，1993：“5029767.21”，1994：“5121559.554”，1995：“5156168.7”，1996：“5286046.506”，1997：“5419440.965 “，1998：”5456092.63“，1999：”5531691.502“，2000：”5713560.034“，2001：”5601404.839“，2002：”5650949.676“，2003：”5681664.468“，2004：”5790765.052“，2005：”5826393.624“， 2006年：“5737615.554”，2007：“5828696.5”，2008：“5656838.878”，2009：“5311840.184”，2010：“5433056.536”，iso：“USA”}

有没有一种方法可以在每次触发mouseover事件时动态设置yAxis域？

代码在这里github link here, everything is in the index.html

现在，我已经通过一个很难的规则建立了yAxis，而域名（[0,10000]）还是可以在这里走动吗？

提前致谢！

Answer 1

d3.csv("path/to/file.csv")
.row(function(d) { return {key: d.key, value: +d.value}; })
.get(function(error, rows) { console.log(rows); });

这段代码实际上是诀窍。它允许我重建数据。

先前。我的数据是在csv文件中，看起来像这样

year country1 country2 country3 ...
1900 29292929 2324244  45446666
.
.
.
2010 3995959  9598858  43549599

所以，用

.row（function（d）{return {{key：d.key，value：+ d.value};}）

我可以选择要从csv文件中检索的键和值。为了我自己的使用，我做了

get（function（d）{return {year：d.year，value：+ d [iso]}）

这里的值：+ d [iso]，'iso'是其他函数传递的字符串。所以这最终会给我一系列像这样的javascript对象

[{'value'：2232323，'year'：'2010'} ......]

我认为这会让事情变得更好，因为对于我所悬停的每个国家，它会给我一系列相关数据。

如何使用具有多列的csv文件在D3.js中设置yAxis的比例

1 个答案: