错误：未捕获TypeError：无法读取undefined属性'线性'

我想从iris.CSV获取负载数据并将其绘制在网页中。错误：未捕获TypeError：无法读取undefined属性'线性'

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>D3 Example</title> 
    <script src="https://d3js.org/d3.v3.js"></script> 
    </script> 
</head> 

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

     var xScale = d3.scale.linear().range([0, 250]); 
     var yScale = d3.scale.linear().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>

但是我收到一个错误。

Error: Uncaught TypeError: Cannot read property 'linear' of undefined

我甚至改变linear为scaleLinear为d3.v4，其也示出了错误。

来源

2017-04-13 Darshan theerth

除了单''标签在'代码看起来不错。由于规模声明之前的'd3.select（）'似乎有效，所以这不应该是你问题的原因。请设置一个[mcve]来展示效果。当这样做时，请尽可能减少并清理代码 – altocumulus

即使我得到“只有协议方案支持跨源请求：HTTP，数据，chrome，chrome扩展名，https”错误。 –

似乎为我工作（我没有足够的CSV文件，所以我只是用一些假数据）：

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

 
var xScale = d3.scale.linear().range([10, 240]); 
 
var yScale = d3.scale.linear().range([10, 240]); 
 

 
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; 
 
} 
 

 
render([{ 
 
    sepal_length: 10, 
 
    petal_length: 20, 
 
    }, 
 
    { 
 
    sepal_length: 15, 
 
    petal_length: 18, 
 
    } 
 
])

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

来源

2017-04-13 07:59:26 thedude

我使用了，并且出现此错误：XMLHttpRequest无法加载文件：/ //D:/Zjtryiris.csv。协议方案仅支持跨源请求：http，data，chrome，chrome-extension，https。 –

问题是这段代码在Google Chrome中无法正常工作。但在Mozilla的Firefox中工作。为什么这样？ –

该文件需要由网络服务器提供。尝试运行一个本地web服务器，如果你有python，你可以运行'python -m SimpleHTTPServer'，然后将浏览器指向'http：// localhost：8000' – thedude

错误：未捕获TypeError：无法读取undefined属性'线性'

回答

相关问题