d3 нет ошибок консоли и нет SVG-рендеринга

Question

В моем CSV есть столбцы с именем «Бронирование» и «Общая сумма», и я думал, что правильно их звоню. Не знаете, где я собираюсь здесь не так ...

В заголовке index.html, я есть

Я также должен добавить выше к телу HTML, потому что использование только дал мне неопределенную ошибку d3.svg ...

D3, кажется, загружен в браузере просто отлично, но мой скрипт не выполняется. В браузере ничего не отображается, и никаких сообщений об ошибках в консоли.

<script type="text/javascript" src="d3/d3.min.js"> 

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.scale.linear().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom") 
.ticks(10); 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left") 
.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; 
    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"]); }); 

}); 

</script> 

Answer 1

У вас смешанный скрипт с src и содержанием. Связанный ресурс имеет приоритет, и в этом случае содержимое игнорируется. Это должно быть так:

<script type="text/javascript" src="d3/d3.min.js"></script> 
<script type="text/javascript"> var // and the rest </script>