Uncaught TypeError: xScale.rangeBand не является функцией в d3.js

Question

Пытается создать гистограмму, следуя Vegibit's tutorial в my fiddle.

d3.min.js справочник работает хорошо.

Однако, когда я пытаюсь реализовать downloaded local copy с помощью:

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

Путь auto generated по инструменту проекта ASP.NET в Visual Studio,

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>

оно проливает ошибка ниже:

Uncaught TypeError: xScale.rangeBand is not a function

Answer 1

Вот ваша скрипка, обновлено до версии 4.х D3: https://jsfiddle.net/jnxh140f/

Основных изменения:

Для использования объектов с styles и attrs (не style и attr), у вас есть для ссылки D3-selection-multi:

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

Для sc эля:

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]) 

Для ширины:

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

Для осей:

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

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

Для смягчения:

.ease(d3.easeElastic) 

Плюс другие небольшие изменения (проверить код).