Question

我正在使用d3.js，Sortable 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);

        };

    }

我没有显示任何内容。我尝试使用相同类型的数据Barchart，它有效。可排序条形图的错误在哪里？

Answer 1

.append("g:")

应该是

.append("g")

如果您之前没有使用过，可能需要查看chrome dev tools。当您可以单步执行代码以查看导致错误发生的确切行时，这样的小错别字调试更容易。

D3.js，可排序条形图未显示

1 个答案: