D3教程在本地计算机上不起作用

本文介绍了D3教程在本地计算机上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试自学D3，我正在使用获得高度评价的Curran Kelleher的D3简介( GitHub页面)

I am trying to teach myself D3 and I'm using the highly-rated Curran Kelleher's Intro to D3 (GitHub Page)

我目前无法读取/解析CSV文件中的数据.他的代码和预期的输出在此处( D3示例代码)

I'm currently stuck on reading/parsing data from CSV files. His code and expected output are here (D3 Example Code).

:在这里复制/粘贴了我的代码:

: Copied/Pasted my code here:

<!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浏览器窗口中获得的输出.关于我出了错的地方有什么想法吗?

I've copied and pasted his code exactly the same in my d3.html page but this is the output I'm getting in my Chrome browser window. Any ideas on where I went wrong?

enter.append()的魔力

对于调试D3 dataviz的任何人，这里有一个非常重要的信息:圆圈已附加.您可以在原点(0,0)看到它们.

The magic of enter.append()

For anyone debugging a D3 dataviz, there is a very important information here: the circles were appended. You can see them at the origin (0,0).

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

This fact eliminates a series of other problems, like the CSV not being loaded, the library not being referenced, the lack of a web server etc...

在原点堆积的元素是不同问题的征兆.通常，罪魁祸首是某个地方的NaN.但是这里的问题更加微妙:

Elements pilling up at the origin is a symptom of different problems. Normally, the culprit is a NaN somewhere. But the problem here is more subtle:

问题在于，当您应使用D3 v3(该代码作者使用的版本)时，您正在使用D3 v4.

The issue is that you're using D3 v4, when you should use D3 v3, which is the version used by the author of that code.

以下是适用于v3的行，但不适用于v4:

These are the lines that worked with v3 but won't work with 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);
    });

让我们评论一下这里发生了什么.这是更新"选择:

Let's comment what's happening here. This is the "update" selection:

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

这是输入"选择:

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

现在，请注意这一点:您将位置设置为更新" 选择，而不是输入"一个:

Now, pay attention to this: you are setting the positions to the "update" selection, not to the "enter" one:

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

那在D3 v4中不起作用.根据 D3创建者Mike Bostock 的说法:

That won't work in D3 v4. According to Mike Bostock, D3 creator:

这是"enter.append()的魔力" ，它在v2和v3中有效，但在v4中不再有效.

That is the "magic of enter.append()", which works in v2 and v3, but not anymore in v4.

解决方案:

只需使用D3 v3.

或者，如果要保留v4，只需合并选择项即可:

Alternatively, if you want to keep v4, just merge the selections:

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的代码: https://bl.ocks.org/an/6f7a7e1bbc682097932d49b0a13221fc/dda68f134c57dc68b7469d10206280ea1a8d610a

Here is that code working with v4: https://bl.ocks.org/anonymous/6f7a7e1bbc682097932d49b0a13221fc/dda68f134c57dc68b7469d10206280ea1a8d610a

这篇关于D3教程在本地计算机上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Bostock