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

В области у, вам не нужно (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>