d3没有控制台错误，也没有SVG渲染

我的CSV列有名为BookingID和Total Paid的列，我想我正确地调用了它们。不知道我要去哪里错在这里...d3没有控制台错误，也没有SVG渲染

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>

来源

2017-02-15 Frederic Bastiat

您将脚本与src和内容混合使用。在这种情况下，链接资源优先，内容被忽略。它应该是这样的：

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

来源

2017-02-15 22:59:30 myf

你说得对，这是问题，但你的解释是不准确的和/或混淆。发生的一切就是内联脚本首先运行，因此失败，因为d3尚未定义。它不被“忽略”。 – SpliFF

否。除非d3.js（或文档中的任何其他真正评估的脚本）查找具有src属性的脚本元素并人为评估其内容（有可能且某些库使用此有趣的黑客），则开放标记和结束标记之间的内容真的被忽略了。 – myf

哦对。我假定，因为我看过几个库使用内容中声明的变量进行配置。没有意识到这些是'eval'黑客。 – SpliFF

d3没有控制台错误，也没有SVG渲染

回答

相关问题