d3线性刻度在yAxis中不起作用

时间:2016-05-13 14:34:17

标签: javascript d3.js data-visualization

我的yAxis比例存在问题。对于一些国家,它运作良好,但对某些国家来说,它没有。就像你可以在图片上看到的那样,对于俄罗斯的数据它可以正常工作,但对于巴西来说它并没有。数据来自世界银行数据。 scale working fine

scale working wrong

代码:

var width = 960,
  height = 600;

var widthChart = 460,
  heightChart = 300;

var margin = {
  top: 30,
  right: 30,
  left : 50,
  bottom : 30
}   

var xScale = d3.scale.linear()
  .range([margin.left, widthChart - margin.right]);

var yScale = d3.scale.linear()
  .range([heightChart - margin.top, margin.bottom]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .ticks(10);

var yAxis = d3.svg.axis()
  .scale(yScale)
  .ticks(7)
  .orient("left");  

var line = d3.svg.line()
  .x(function(d) { return xScale(d.year); })
  .y(function(d) { return yScale(d.value); })
  .interpolate("basis");

var projection = d3.geo.mercator()
  .scale(150)
  .translate([width / 2, height / 1.5]);

var path = d3.geo.path()
  .projection(projection);

var svg = d3.select("body").select(".container").select(".center-    block").select(".map").append("svg")
  .attr("width", width)
  .attr("height", height);

var svgLineChart = d3.select("body").select(".container").select(".lineChart").append("svg")
  .attr("width", widthChart)
  .attr("id", "svgLineChart")
  .attr("height", heightChart);

var color = d3.scale.linear().range(["#bfddfc","#1e4770"]);    

var tooltip = d3.select('body').append('div')
          .attr('class', 'hidden tooltip');    

queue()  
  .defer(d3.json, 'countries.topo.json')
  .defer(d3.csv, 'countriesModified.csv')
  .await(visualize);

function visualize(error, countries, data) {
if (error) return console.error(error);

var countriesObj = {};
var countriesArr = [];
for (var i = 0; i < data.length; i++) {
    countriesObj[i] = {
        countryName : data[i].CountryName,
        countryCode : data[i].CountryCode, 
        years : [
            {year : "1961", value : data[i].y1961},
            {year : "1962", value : data[i].y1962},
            {year : "1963", value : data[i].y1963},
            {year : "1964", value : data[i].y1964},
            {year : "1965", value : data[i].y1965},
            {year : "1966", value : data[i].y1966},
            {year : "1967", value : data[i].y1967},
            {year : "1968", value : data[i].y1968},
            {year : "1969", value : data[i].y1969},
            {year : "1970", value : data[i].y1970},
            {year : "1971", value : data[i].y1971},
            {year : "1972", value : data[i].y1972},
            {year : "1973", value : data[i].y1973},
            {year : "1974", value : data[i].y1974},
            {year : "1975", value : data[i].y1975},
            {year : "1976", value : data[i].y1976},
            {year : "1977", value : data[i].y1977},
            {year : "1978", value : data[i].y1978},
            {year : "1979", value : data[i].y1979},
            {year : "1980", value : data[i].y1980},
            {year : "1981", value : data[i].y1981},
            {year : "1982", value : data[i].y1982},
            {year : "1983", value : data[i].y1983},
            {year : "1984", value : data[i].y1984},
            {year : "1985", value : data[i].y1985},
            {year : "1986", value : data[i].y1986},
            {year : "1987", value : data[i].y1987},
            {year : "1988", value : data[i].y1988},
            {year : "1989", value : data[i].y1989},
            {year : "1990", value : data[i].y1990},
            {year : "1991", value : data[i].y1991},
            {year : "1992", value : data[i].y1992},
            {year : "1993", value : data[i].y1993},
            {year : "1994", value : data[i].y1994},
            {year : "1995", value : data[i].y1995},
            {year : "1996", value : data[i].y1996},
            {year : "1997", value : data[i].y1997},
            {year : "1998", value : data[i].y1998},
            {year : "1999", value : data[i].y1999},
            {year : "2000", value : data[i].y2000},
            {year : "2001", value : data[i].y2001},
            {year : "2002", value : data[i].y2002},
            {year : "2003", value : data[i].y2003},
            {year : "2004", value : data[i].y2004},
            {year : "2005", value : data[i].y2005},
            {year : "2006", value : data[i].y2006},
            {year : "2007", value : data[i].y2007},
            {year : "2008", value : data[i].y2008},
            {year : "2009", value : data[i].y2009},
            {year : "2010", value : data[i].y2010},
            {year : "2011", value : data[i].y2011},
            {year : "2012", value : data[i].y2012},
            {year : "2013", value : data[i].y2013},
            {year : "2014", value : data[i].y2014}
        ]
    }
    countriesArr[i] = countriesObj[i];
}

console.log(countriesArr[0]);

function getCountryName(id) {
    for (var i = 0; i < countriesArr.length; i++) {
        if (countriesArr[i].countryCode === id) {
            return countriesArr[i].countryName;
        }
    }
}

function getHowManyCountries() {
    return countriesArr.length;
}

d3.select(".howMany").text(getHowManyCountries);

function chooseCountry(d) {
    var countryId = d.id;
    console.log(countryId);
    for (var i = 0; i < countriesArr.length; i++) {
        if (countriesArr[i].countryCode === countryId) {

            if (countriesArr[i].years.value === undefined) {
                console.log("no data");
            }

            console.log(countriesArr[i].countryName);

            var min = d3.min(d3.extent(countriesArr[i].years, function(d) {return d.value;}));
            var max = d3.max(d3.extent(countriesArr[i].years, function(d) {return d.value}));
            yScale.domain([min, max]);

            var minYear = d3.min(countriesArr[i].years, function(d) {return d.year;});
            var maxYear = d3.max(countriesArr[i].years, function(d) {return d.year});
            xScale.domain([minYear, maxYear]);

            svgLineChart.selectAll("*")
                .remove();

            svgLineChart.selectAll(".line")
                .transition()
                .duration(300)
                .delay(20)
                .attr("d", line);

            svgLineChart.append("g")
                .attr("transform", "translate(0," + (heightChart - margin.bottom) + ")")
                .attr("class","x axis")
                .call(xAxis);

            svgLineChart.append("g")
                .attr("transform", "translate(" + (margin.left) + ",0)")
                .attr("class","y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".5em")
                .attr("x",0 - (heightChart / 2))
                .style("text-anchor", "middle")
                .text("POPULATION DENSITY"); 

            svgLineChart.append("path")
                .datum(countriesArr[i].years)
                .attr("class", "line")
                .attr("d", line);


            d3.select("#description")
                .text(countriesArr[i].countryName);
            }
        }
    return countryId;      
}

svg.append("g")
  .attr("id", "countries")
  .selectAll("path")
  .data(topojson.feature(countries, countries.objects.countries).features)
  .enter()
  .append("path")
  .attr("fill", function(d) {
      var value = d.properties.size;
      if (value) {
          return color(value);
      }
      else {
          return "#747e87";
      }
  })
  .style("stroke", "#363b3f")
  .attr("id", function(d) { return d.id; })
  .attr("d", path)
  .on("click", function(d) {
      chooseCountry(d);
      d3.select(".selected").classed("selected", false);
      d3.select(this).classed("selected", true);
  })
  .on("mouseover", function(d) {
      d3.select(this)
          .transition()
          .duration(50)
          .attr("fill", "#b0bf91");
  })
  .on("mouseout", function(d) {
      tooltip.classed('hidden', true);
      d3.select(this)
          .transition()
          .duration(50)
          .attr("fill", "#747e87")
  })
  .on("mousemove", function(d) {
      var mouse = d3.mouse(svg.node()).map(function(d) {
          return parseInt(d);
      });
      tooltip.classed('hidden', false)
          .attr('style', 'left:' + (mouse[0] + 200) +
                  'px; top:' + (mouse[1] + 120) + 'px')
          .html(getCountryName(d.id));
  });

};

请帮忙,因为我真的没有在这里看到错误。

0 个答案:

没有答案