TypeError：n不是函數

Question

這是由某種功能問題導致的，我在某處重寫了一個事件參數，是否正確？或外來的分號？

一切似乎加載（例如CSS樣式）在頁面上，但我得到這個錯誤。你能發現我的問題在哪裏嗎？

p.s.我只是在這裏使用小提琴以方便使用。我託管我自己的HTTP服務器，所以我知道CSV加載正確。

https://jsfiddle.net/fredbastiat/hyLb2tym/

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var x = d3.scaleLinear().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

var xAxis = d3.axisBottom() 
.scale(x) 
.ticks(10); 

var yAxis = d3.axisLeft() 
.scale(y) 
.ticks(10); 


var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
.append("g") 
    .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")"); 


d3.csv("Sales Export Friendly 2-14-2017.csv", function(error, sales) { 
    if (error) throw error; 
    /*sales.forEach(function(sale) { 
     sale.BookingID = sale.BookingID; 
     sale["Total Paid"] = sale["Total Paid"]; 
    });*/ 
    x.domain(sales.map(function(sale) { return sale.BookingID; })); 
    y.domain([0, d3.max(sales, sales.map(function(sale) { return sale["Total Paid"]; }))]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
.selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("$ USD"); 

svg.selectAll("bar") 
    .sales(sales) 
.enter().append("rect") 
    .style("fill", "steelblue") 
    .attr("x", function(sale) { return x(sale.BookingID); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(sale) { return y(sale["Total Paid"]); }) 
    .attr("height", function(sale) { return height - y(sale["Total Paid"]); }); 

}); 

Answer 1

在Y域，你不需要(sales, sales.map ...只是(sales.map。像這樣：

y.domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]); 

在繪製任何東西之前發生的錯誤有助於確定錯誤是在刻度上，因爲一切都依賴於它們。

超出第一個錯誤消息， 當您選擇附加條時，也有一個錯誤。你想要.data(sales)而不是.sales(sales)。

此外，d3.linearScale沒有rangeBand方法，你必須使用一個scaleBand，是這樣的：

var x = d3.scaleBand() 
     .domain(sales.map(function(sale){ return sale.bookingID; })) 
     .range([0, width]) 
     .paddingInner([0.1]) 

這個尺度選擇是在任何情況下更好，因爲訂單不一個線性維度，但有一個離散元素。

總之，它應該給你這樣的：

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
 
\t \t width = 600 - margin.left - margin.right, 
 
\t \t height = 300 - margin.top - margin.bottom; 
 
\t 
 

 
    var sales = [ 
 
    \t {bookingID:100,"Total Paid":100}, 
 
    {bookingID:101,"Total Paid":90}, 
 
    {bookingID:102,"Total Paid":100}, 
 
    {bookingID:103,"Total Paid":80}, 
 
    {bookingID:104,"Total Paid":150}, 
 
    {bookingID:105,"Total Paid":100}, 
 
    {bookingID:106,"Total Paid":160}, 
 
    {bookingID:107,"Total Paid":100} 
 
    ]; 
 
    
 
\t var svg = d3.select("body").append("svg") 
 
\t \t .attr("width", width + margin.left + margin.right) 
 
\t \t .attr("height", height + margin.top + margin.bottom) 
 
\t  .append("g") 
 
\t \t .attr("transform","translate("+margin.left+","+margin.top+")"); 
 
\t 
 
    var y = d3.scaleLinear() 
 
     .range([height, 0]) 
 
     .domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]); 
 
    
 
\t var yAxis = d3.axisLeft() 
 
    .scale(y) 
 
    .ticks(10); 
 
    
 
    var x = d3.scaleBand() 
 
    \t .domain(sales.map(function(sale){ return sale.bookingID; })) 
 
    \t .range([0, width]) 
 
    \t .paddingInner([0.1]); 
 
    
 
\t var xAxis = d3.axisBottom() 
 
    .scale(x) 
 
\t .ticks(10); 
 

 
\t svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis) 
 
    .selectAll("text") 
 
     .style("text-anchor", "end") 
 
     .attr("dx", "-.8em") 
 
     .attr("dy", "-.55em") 
 
     .attr("transform", "rotate(-90)"); 
 

 
\t svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
    .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 6) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("$ USD"); 
 

 
\t svg.selectAll("bar") 
 
     .data(sales) 
 
    .enter().append("rect") 
 
     .style("fill", "steelblue") 
 
     .attr("x", function(sale) { return x(sale.bookingID); }) 
 
     .attr("width", x.bandwidth()) 
 
     .attr("y", function(sale) { return y(sale["Total Paid"]); }) 
 
     .attr("height", function(sale) { return height - y(sale["Total Paid"]); }); \t 
 
\t \t 
 
// \t });

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script> 
 
<div class="someclass"> 
 
    <h2>Create A Bar Chart With D3 JavaScript</h2> 
 
    <div id="bar-chart"> 
 
    </div> 
 
</div>