Question

我找不到以下d3代码中的缺陷：

//d3.tsv("dictionaries/dictionary-tsv.tsv", 
//      function(d) { return +d.frequency },
//      function(error, rows) { console.log(rows);},
//      function(d) { drawExample(data) }
//      );

var data = [1,2,12,4,7];
drawExample(data);

function drawExample(frequency) {

var x = d3.scale.linear()
    .domain([0, d3.max(frequency)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
  .data(frequency)
  .enter().append("div")
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });
}

如果您按原样运行，则会生成条形图。如果您对var data和drawExample进行注释并取消注释该方法以从tsv获取外部数据，则会失败（尽管firefox调试器显示数据已加载且未定义任何var未显示在任何位置）。 stackoverflow链接：

“csv to array in d3.js”和“variable scope in d3 javascript”

似乎没有帮助。我正在使用d3.v3.min.js，我的tsv文件如下：

word   frequency
and    1
be     2
art    12
break  4
cat    7

我确信这是我的错，所以任何帮助都会非常感激！

Answer 1

d3.tsv()没有返回任何内容，它是一个异步调用（就像你用jQuery创建AJAX请求时）。所以一切都在回调中发生。

你的电话应该是这样的：

d3.tsv("dictionaries/dictionary-tsv.tsv", function(data){
    drawExample(data);
});

不是100％肯定（只在d3连接器上处理json - 但它应该是相同的）

将数据传递给d3函数

1 个答案: