D3.js, Сортируемый столбиковых не отображая

Question

I`m с помощью d3.js, Сортируемый BarChart со следующим кодом:

function countrydownloads(input) { 

     d3.select(".barchartCountryDownloads").select("svg").remove(); 
     var data = [{"country":"Austria","downloads":"10000"},{"country":"Germany","downloads":"20000"},{"country":"Spain","downloads":"30000"}]; 


     var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
      width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

     var formatPercent = d3.format(".0%"); 

     var x = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1, 1); 

     var y = d3.scale.linear() 
      .range([height, 0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .tickFormat(formatPercent); 

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




      data.forEach(function(d) { 
      d.downloads = +d.downloads; 
      }); 

      x.domain(data.map(function(d) { return d.country; })); 
      y.domain([0, d3.max(data, function(d) { return d.downloads; })]); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      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("Frequency"); 

      svg.selectAll(".bar") 
       .data(data) 
      .enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.country); }) 
       .attr("width", x.rangeBand()) 
       .attr("y", function(d) { return y(d.downloads); }) 
       .attr("height", function(d) { return height - y(d.downloads); }); 

      d3.select("input").on("change", change); 

      var sortTimeout = setTimeout(function() { 
      d3.select("input").property("checked", true).each(change); 
      }, 2000); 

      function change() { 
      clearTimeout(sortTimeout); 

      // Copy-on-write since tweens are evaluated after a delay. 
      var x0 = x.domain(data.sort(this.checked 
       ? function(a, b) { return b.downloads - a.downloads; } 
       : function(a, b) { return d3.ascending(a.country, b.country); }) 
       .map(function(d) { return d.country; })) 
       .copy(); 

      var transition = svg.transition().duration(750), 
       delay = function(d, i) { return i * 50; }; 

      transition.selectAll(".bar") 
       .delay(delay) 
       .attr("x", function(d) { return x0(d.country); }); 

      transition.select(".x.axis") 
       .call(xAxis) 
       .selectAll("g") 
       .delay(delay); 

     }; 

    } 

I don`t получить что-либо отображается. Я попробовал Barchart с такими же данными, там он работал. Где ошибка со Сортируемым Бархатом?

Answer 1

.append("g:") 

должен быть

.append("g") 

Если вы не использовали их прежде, Вы могли бы хотеть проверить вне chrome dev tools. Небольшие опечатки, подобные этому, намного легче отладчику, когда вы можете пройти через свой код, чтобы точно увидеть, какая строка является причиной возникновения ошибки.