Uncaught TypeError: xScale.rangeBand non è una funzione in d3.js

Cercando di generare il grafico a barre seguente Vegibit il tutorial in il mio violino.

Il d3.min.js di riferimento per opere di bene.

Tuttavia, quando si tenta di implementare scaricato copia locale utilizzando:

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

Il percorso è generata automaticamente da Visual Studio ASP.NET progetto strumento

JS:

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

HTML:

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

genera il seguente errore:

Uncaught TypeError: xScale.rangeBand non è una funzione

  • Come stai visualizzando la pagina? Tramite un server web locale o via file? Che browser stai usando? Cromo modello di sicurezza richiede di tutti i file nella stessa directory, se essi sono accessibili direttamente e non tramite un web server.
  • attualmente tramite un server web, il browser è Chrome
  • Io non sono sicuro di web server di capire il carattere tilde ( ~ ).
  • Il percorso è auto generato da Visual Studio ASP.NET progetto di strumento
  • duplicato di questo, forse: stackoverflow.com/questions/3077558/…
  • Scaricato copia di D3 v4. Il tuo codice funziona solo con D3 v3.
  • Se hai bisogno di fare il lavoro con D3 v4, come pensate di fare?

InformationsquelleAutor student | 2016-07-30



One Reply
  1. 17

    Qui è il tuo violino, aggiornati a D3 versione 4.x: https://jsfiddle.net/jnxh140f/

    Principali modifiche:

    Per l’utilizzo di oggetti con styles e attrs (non style e attr), si dispone di riferimento D3-selezione-multipla:

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

    Per le scale:

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

    Per la larghezza:

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

    Per gli assi:

    var vAxis = d3.axisLeft(verticalGuideScale)
        .ticks(10)
    
    var hAxis = d3.axisBottom(xScale)
        .ticks(chartdata.size)

    Per l’allentamento:

    .ease(d3.easeElastic)

    Più altre piccole modifiche (controllare il codice).

Lascia un commento