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.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"]); });	
		
//	});

这种比例选择在任何情况下都更好，因为订单不是线性维度，而是具有离散元素的维度。

总而言之，它应该给你这样的东西：

＆＃13;

<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;

TypeError：n不是函数

1 个答案: