Question

我正在学习D3 JS，并且试图复制D3条形图教程here。它可以像使用d3.v3一样正常工作，但是从更改src到d3.d5的那一刻起：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
//Irrelevant CSS...
</style>
<svg class="chart"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script> //Changed to d3.v5
<script>

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);

d3.tsv("data.tsv", type, function(error, data) {
  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);

  bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

我得到一个错误：

Uncaught (in promise) TypeError: chart.selectAll(...).data(...).enter is not a function

我宁愿学习最新和最伟大的知识，我假设它是D3.v5，而不是D3.v3，除非后者确实是最新的稳定版本。此方法链中是否有语法更改？因为我认为.selectAll(...).data(...).enter将是一个非常“标准”的方法链。不幸的是，这令人惊讶地抵抗了谷歌搜索；类似的问题是具有更多自由度的更复杂的用例，而我的问题仅涉及更改D3版本。

Answer 1

我发现您的解决方案有两个问题：

将d3.scale.linear（）更改为d3.scaleLinear（）
将d3.tsv("data.tsv", type, function(error, data) {更改为d3.tsv("data.tsv").then(function(data) {

对于2的解释：d3.tsv函数返回一个Promise，您必须先解决该Promise，然后才能使用数据

D3Js.v5：... selectAll（...）。data（...）。enter不是函数

1 个答案: