这是由某种功能问题造成的,我在某处覆盖了一个事件参数,对吗?还是一个无关的分号?
一切似乎都在页面上加载(例如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"]); });
});
答案 0 :(得分:1)
在y域中,您不需要(sales.map
...只需y.domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]);
。像这样:
.data(sales)
在绘制任何内容之前发生错误有助于确定错误是否在比例中,因为一切都依赖于它们。
超出第一条错误消息,
在您选择附加条形图时也会出错。您希望.sales(sales)
不是 var x = d3.scaleBand()
.domain(sales.map(function(sale){ return sale.bookingID; }))
.range([0, width])
.paddingInner([0.1])
。
此外,d3.linearScale没有rangeBand方法,您必须使用scaleBand,例如:
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var sales = [
{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}
];
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+")");
var y = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]);
var yAxis = d3.axisLeft()
.scale(y)
.ticks(10);
var x = d3.scaleBand()
.domain(sales.map(function(sale){ return sale.bookingID; }))
.range([0, width])
.paddingInner([0.1]);
var xAxis = d3.axisBottom()
.scale(x)
.ticks(10);
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")
.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"]); });
// });
这种比例选择在任何情况下都更好,因为订单不是线性维度,而是具有离散元素的维度。
总而言之,它应该给你这样的东西:
<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>
&#13;
{{1}}&#13;