Fatal编程技术网
  • javascript/
  • Javascript D3教程没有'；不要在本地机器上工作

Javascript D3教程没有'；不要在本地机器上工作

javascript d3.js

Javascript D3教程没有'；不要在本地机器上工作,javascript,d3.js,Javascript,D3.js,我正在尝试自学D3，我正在使用高评价的科伦·凯勒赫的D3入门（） 我目前正忙于从CSV文件中读取/解析数据。他的代码和预期输出在这里（） 编辑：：在此处复制/粘贴我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 tutorial 10</title> <script src="https://cdnjs.clou

我正在尝试自学D3，我正在使用高评价的科伦·凯勒赫的D3入门（）

我目前正忙于从CSV文件中读取/解析数据。他的代码和预期输出在这里（）

编辑：：在此处复制/粘贴我的代码：

<!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教程10
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，250）
.attr（“高度”，250）；
var xScale=d3.scaleLinear（）.range（[0250]）；
var yScale=d3.scaleLinear（）.range（[0250]）；
函数渲染（数据）{
域（d3.extent（数据，函数（d）{return d.sepal_length；}））；
域（d3.extent（数据，函数（d）{returnd.petal_length；}））；
var circles=svg.selectAll（“circle”）.data（数据）；
circles.enter（）.append（“circle”）.attr（“r”，10）；
圈子
.attr（“cx”，函数（d）{return xScale（d.sepal_length）；}）
.attr（“cy”，函数（d）{返回yScale（d.petal_长度）；}）；
circles.exit（）.remove（）；
}
功能类型（d）{
d、 萼片长度=+d.萼片长度；
d、 萼片宽度=+d.萼片宽度；
d、 花瓣长度=+d.花瓣长度；
d、 花瓣宽度=+d.花瓣宽度；
返回d；
}
d3.csv（“iris.csv”，类型，渲染）；
我在我的d3.html页面中复制并粘贴了完全相同的代码，但这是我在Chrome浏览器窗口中得到的输出。你知道我哪里出错了吗？

enter.append（）的魔力 对于调试D3 dataviz的任何人来说，这里有一个非常重要的信息：圆圈被附加了。可以在原点（0,0）处看到它们

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

元素在原点堆积是不同问题的症状。通常，罪魁祸首是某个地方的
NaN
。但这里的问题更微妙：

问题是您使用的是D3V4，而您应该使用D3V3，这是代码作者使用的版本

这些行适用于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);
这是“输入”选项：

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

circles.enter().append("circle").attr("r", 10);
现在，请注意：您正在将位置设置为“更新”选项，而不是“输入”选项：

这在D3V4中不起作用。据D3创建者介绍：

D32.0引入了一个更改来解决这个重复：添加到enter选择将把输入的元素复制到update选择中。因此，在添加到enter选择之后应用于更新选择的任何操作都将应用于输入和更新元素，并且可以消除重复代码[…]D3 4.0消除了enter.append的魔力。事实上，D34.0完全消除了enter和normal选择之间的区别：现在只有一类选择

这就是“enter.append（）的魔力”，它在v2和v3中工作，但在v4中不再工作

解决方案：

只需使用D3V3

或者，如果要保留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的代码：

我看到@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>




var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，250）
.attr（“高度”，250）；
var xScale=d3.scaleLinear（）.range（[0250]）；
var yScale=d3.scaleLinear（）.range（[0250]）；
函数渲染（数据）{
域（d3.extent（数据，函数（d）{return d.sepal_length；}））；
域（d3.extent（数据，函数（d）{returnd.petal_length；}））；
var circles=svg.selectAll（“圆”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，10）
.attr（“cx”，函数（d）{return xScale（d.sepal_length）；}）
.attr（“cy”，函数（d）{返回yScale（d.petal_长度）；}）；
}
功能类型（d）{
d、 萼片长度=+d.萼片长度；
d、 萼片宽度=+d.萼片宽度；
d、 花瓣长度=+d.花瓣长度；
d、 花瓣宽度=+d.花瓣宽度；
返回d；
}
d3.csv（“iris.csv”，类型，渲染）；



它产生了。尝试从一开始就学习v4编码。它最终会节省你的时间
 我看到有一个iris.csv数据文件-您的代码也有它吗？是的-它与.html文件位于同一文件夹中如果您完全复制示例，我一眼就看不到任何错误。我会建议玩一些数字，如圆半径或面积边距，看看它是否有一些影响。如果没有任何帮助，我明天将尝试这个例子。还可以看到非常好的项目：，我想你可以从他简单的d3和csv例子开始。以下是关于Plunker的完整工作示例：。按Run，您将看到正确的结果，data.csv是示例中的数据文件。是的，这是我的问题。现在，我的解决方案与示例和预期输出相匹配。非常感谢。