Question

我正在努力教自己D3和我使用高评级的Curran Kelleher对D3的介绍（GitHub Page）

我目前仍在阅读/解析CSV文件中的数据。他的代码和预期输出在这里（D3 Example Code）。

编辑::复制/粘贴我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 tutorial 10</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
        .attr("width",  250)
        .attr("height", 250);

      var xScale = d3.scaleLinear().range([0, 250]);
      var yScale = d3.scaleLinear().range([0, 250]);

      function render(data){

        xScale.domain(d3.extent(data, function (d){ return d.sepal_length; }));
        yScale.domain(d3.extent(data, function (d){ return d.petal_length; }));

        var circles = svg.selectAll("circle").data(data);
        circles.enter().append("circle").attr("r", 10);
        circles
          .attr("cx", function (d){ return xScale(d.sepal_length); })
          .attr("cy", function (d){ return yScale(d.petal_length); });

        circles.exit().remove();
      }

      function type(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width  = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width  = +d.petal_width;
        return d;
      }

      d3.csv("iris.csv", type, render);
</script>
</body>
</html>

我已经在我的d3.html页面中复制并粘贴了他的代码，但这是我在Chrome浏览器窗口中输入的输出。关于我哪里出错的任何想法？

Answer 1

enter.append（）

的魔力

对于任何调试D3 dataviz的人来说，这里有一个非常重要的信息：圈子被追加。你可以在原点（0,0）看到它们。

这个事实消除了一系列其他问题，例如没有加载CSV，没有引用库，缺少Web服务器等......

原点起伏的元素是不同问题的症状。通常，罪魁祸首是某处NaN。但这里的问题更加微妙：

问题是你在使用D3 v4时应该使用D3 v3，这是该代码作者使用的版本。

这些是与v3一起使用但不适用于v4的行：

var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle").attr("r", 10);
circles.attr("cx", function(d) {
        return xScale(d.sepal_length);
    })
    .attr("cy", function(d) {
        return yScale(d.petal_length);
    });

让我们评论一下这里发生了什么。这是“更新”选择：

var circles = svg.selectAll("circle").data(data);

这是“输入”选择：

circles.enter().append("circle").attr("r", 10);

现在，请注意：您将位置设置为“更新”选项，而不是“输入”选项：

circles.attr("cx", function(d) {
        return xScale(d.sepal_length);
    })
    .attr("cy", function(d) {
        return yScale(d.petal_length);
    });

这在D3 v4中不起作用。根据{{3}}，D3创建者：

D3 2.0引入了一个更改以解决此重复问题：附加到输入选择现在会将输入元素复制到更新选择中。因此，在追加到输入选择之后应用于更新选择的任何操作都将适用于输入和更新元素，并且可以消除重复代码[...] D3 4.0消除了enter.append的魔力。实际上，D3 4.0完全消除了输入和正常选择之间的区别：现在只有一类选择。

这是“enter.append（）”的魔力，它在v2和v3中有效，但在v4中不再有效。

<强>解决方案：

只需使用D3 v3。

或者，如果你想保留v4，只需合并选择：

var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle").attr("r", 10).merge(circles)
    .attr("cx", function(d) {
        return xScale(d.sepal_length);
    })
    .attr("cy", function(d) {
        return yScale(d.petal_length);
    });

circles.exit().remove();

以下是使用v4的代码：Mike Bostock

Answer 2

我看到@Gerardo已经回答了。但是，当我学习D3.js时，我发现在版本4中编写代码非常有用，即使教程是在版本3中，并尝试重新编写这些教程以使它们工作。

这个非常简单。唯一重要的变化是命名法：d3.scale.linear()变为d3.scaleLinear()。分配数据属性也更简单（在输入数据后，您可以立即添加圆圈属性，而无需重新选择圆圈。）

v4代码如下。我还删除了一行 - 即circles.exit().remove();的一行 - 因为它与本教程无关！

<script>
  var svg = d3.select("body").append("svg")
    .attr("width",  250)
    .attr("height", 250);

  var xScale = d3.scaleLinear().range([0, 250]);
  var yScale = d3.scaleLinear().range([0, 250]);

  function render(data) {

    xScale.domain(d3.extent(data, function(d) { return d.sepal_length; }));
    yScale.domain(d3.extent(data, function(d) { return d.petal_length; }));

    var circles = svg.selectAll("circle")
      .data(data)
      .enter().append("circle")
        .attr("r", 10)
        .attr("cx", function (d) { return xScale(d.sepal_length); })
        .attr("cy", function (d) { return yScale(d.petal_length); });
  }

  function type(d) {
    d.sepal_length = +d.sepal_length;
    d.sepal_width  = +d.sepal_width;
    d.petal_length = +d.petal_length;
    d.petal_width  = +d.petal_width;
    return d;
  }

   d3.csv("iris.csv", type, render);

 </script>

它产生this output。尝试从头开始学习v4编码。它最终会节省你的时间！

D3教程不适用于本地机器

2 个答案:

enter.append（）