Loại không bắt buộcError: xScale.rangeBand không phải là một hàm trong d3.js

Question

Cố gắng tạo biểu đồ thanh bằng cách theo dõi Vegibit's tutorial trong my fiddle.

Tham chiếu d3.min.js hoạt động tốt.

Tuy nhiên khi tôi cố gắng thực hiện bằng cách sử dụng downloaded local copy:

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

Đường dẫn là auto generated bằng công cụ dự án ASP.NET Visual Studio của

d3BarChart({ 
 
     element: '#bar-chart', 
 
     dataSource: [10, 20, 220, 240, 270, 300, 330, 370, 410, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 
 
      135, 150, 165, 180, 200], 
 
    }); 
 

 
    function d3BarChart(chartConfig) { 
 

 
     var dataSource = chartConfig.dataSource; 
 
     var margin = { top: 30, right: 10, bottom: 30, left: 50 }; 
 

 
     var height = 400 - margin.top - margin.bottom, 
 
      width = 720 - margin.left - margin.right, 
 
      barWidth = 30, 
 
      barOffset = 10; 
 

 
     var dynamicColor; 
 

 
     var yScale = d3.scaleLinear() 
 
      .domain([0, d3.max(chartConfig.dataSource)]) 
 
      .range([0, height]) 
 

 
     var xScale = d3.scaleBand() 
 
      .domain(d3.range(0, chartConfig.dataSource.length)) 
 
      .range([0, width]) 
 

 
     var colors = d3.scaleLinear() 
 
      .domain([0, chartConfig.dataSource.length]) 
 
      .range(['red', 'green']) 
 

 
     var awesome = d3.select(chartConfig.element).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 + ')') 
 
      .selectAll('rect').data(chartConfig.dataSource) 
 
      .enter().append('rect') 
 
      .style({ 
 
      'fill': function (data, i) { 
 
       return colors(i); 
 
      }, 'stroke': '#31708f', 'stroke-width': '5' 
 
      }) 
 
      .attr('width', xScale.rangeBand()) 
 
      .attr('x', function (data, i) { 
 
      return xScale(i); 
 
      }) 
 
      .attr('height', 0) 
 
      .attr('y', height) 
 
      .on('mouseover', function (data) { 
 
      dynamicColor = this.style.fill; 
 
      d3.select(this) 
 
       .style('fill', 'brown') 
 
      }) 
 

 
      .on('mouseout', function (data) { 
 
      d3.select(this) 
 
       .style('fill', dynamicColor) 
 
      }) 
 

 
     awesome.transition() 
 
      .attr('height', function (data) { 
 
      return yScale(data); 
 
      }) 
 
      .attr('y', function (data) { 
 
      return height - yScale(data); 
 
      }) 
 
      .delay(function (data, i) { 
 
      return i * 20; 
 
      }) 
 
      .duration(2000) 
 
      .ease('elastic') 
 

 
     var verticalGuideScale = d3.scale.linear() 
 
      .domain([0, d3.max(chartConfig.dataSource)]) 
 
      .range([height, 0]) 
 

 
     var vAxis = d3.svg.axis() 
 
      .scale(verticalGuideScale) 
 
      .orient('left') 
 
      .ticks(10) 
 

 
     var verticalGuide = d3.select('svg').append('g') 
 
     vAxis(verticalGuide) 
 
     verticalGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')') 
 
     verticalGuide.selectAll('path') 
 
      .style({ fill: 'none', stroke: "#3c763d" }) 
 
     verticalGuide.selectAll('line') 
 
      .style({ stroke: "#3c763d" }) 
 

 
     var hAxis = d3.svg.axis() 
 
      .scale(xScale) 
 
      .orient('bottom') 
 
      .ticks(chartConfig.dataSource.size) 
 

 
     var horizontalGuide = d3.select('svg').append('g') 
 
     hAxis(horizontalGuide) 
 
     horizontalGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')') 
 
     horizontalGuide.selectAll('path') 
 
      .style({ fill: 'none', stroke: "#3c763d" }) 
 
     horizontalGuide.selectAll('line') 
 
      .style({ stroke: "#3c763d" }); 
 
    }

<div id="bar-chart"></div>

nó ném lỗi dưới đây:

Uncaught TypeError: xScale.rangeBand is not a function

Answer 1

Đây là fiddle của bạn, cập nhật để D3 phiên bản 4.x: https://jsfiddle.net/jnxh140f/

Những thay đổi chính:

Để sử dụng đối tượng với styles và attrs (không style và attr), bạn có để tham khảo D3-selection-multi:

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script> 

Đối với sc ales:

var yScale = d3.scaleLinear() 
    .domain([0, d3.max(chartdata)]) 
    .range([0, height]) 

var xScale = d3.scaleBand() 
    .domain(d3.range(0, chartdata.length)) 
    .range([0, width]) 

Đối với width:

.attr('width', xScale.bandwidth()) 

Đối với các trục:

var vAxis = d3.axisLeft(verticalGuideScale) 
    .ticks(10) 

var hAxis = d3.axisBottom(xScale) 
    .ticks(chartdata.size) 

Đối với nới lỏng định:

.ease(d3.easeElastic) 

Cộng khác thay đổi nhỏ (kiểm tra mã).