錯誤：未捕獲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屬性'線性'

回答

相關問題