d3序数比例 - 使用地图功能标记刻度,但它不会正确映射

时间:2015-05-19 19:14:36

标签: javascript d3.js

我正在尝试使用D3设置一个相当基本的条形图。我似乎掌握了序数尺度(或者我认为),但是地图功能没有正确映射。 (就像它映射到反向数组,而不是我的实际数组)

这是样本数据:

[
  {
    "ShipCountry": "USA",
    "Column1": 169209.9000
  },
  {
    "ShipCountry": "Germany",
    "Column1": 140173.0500
  },
  {
    "ShipCountry": "Austria",
    "Column1": 91793.2900
  },
  {
    "ShipCountry": "Brazil",
    "Column1": 60623.8400
  },
  {
    "ShipCountry": "France",
    "Column1": 52713.6700
  },
  {
    "ShipCountry": "Sweden",
    "Column1": 40032.4400
  },
  {
    "ShipCountry": "UK",
    "Column1": 36697.6900
  },
  {
    "ShipCountry": "Venezuela",
    "Column1": 34051.4900
  },
  {
    "ShipCountry": "Ireland",
    "Column1": 33649.7800
  },
  {
    "ShipCountry": "Canada",
    "Column1": 27229.1000
  },
  {
    "ShipCountry": "Denmark",
    "Column1": 17047.1000
  },
  {
    "ShipCountry": "Switzerland",
    "Column1": 16902.8000
  },
  {
    "ShipCountry": "Belgium",
    "Column1": 15716.3000
  },
  {
    "ShipCountry": "Mexico",
    "Column1": 14255.1800
  },
  {
    "ShipCountry": "Finland",
    "Column1": 11570.3800
  },
  {
    "ShipCountry": "Italy",
    "Column1": 10637.7300
  },
  {
    "ShipCountry": "Spain",
    "Column1": 10591.3100
  },
  {
    "ShipCountry": "Portugal",
    "Column1": 8152.2200
  },
  {
    "ShipCountry": "Argentina",
    "Column1": 7276.9500
  },
  {
    "ShipCountry": "Norway",
    "Column1": 3413.0000
  },
  {
    "ShipCountry": "Poland",
    "Column1": 2112.8200
  }
]

这是我的图表代码 -

function createChart(chartData) {


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

    var width = 1000 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
    var padding = 0;

    //svg for chart with margins
    var svg = d3.select('#chart-wrapper')
                    .append('svg')
                        .attr('height', height + margin.top + margin.bottom)
                        .attr('width', width + margin.left + margin.right)
                    .append('g')
                        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    //xScale will be based on ShipCountry attribute
    var xScale = d3.scale.ordinal().domain(chartData.map(function(d) { return d.ShipCountry; }))
                                                                .rangeRoundBands([0, width], .05);

    //yScale based on Freight
    var yScale = d3.scale.linear().domain([0, d3.max(chartData, function (d) {
                                                                    return d.Column1;
                                                                })])
                                                                .range([height, 0]);

    //axis

    var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
    var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(10);

    svg.selectAll('rect')
        .data(chartData)
        .enter()
        .append('rect')
            .attr('x', function (d, i) {
                return xScale(d.ShipCountry);
            })
            .attr('y', function (d) {
                return height - yScale(d.Column1);
            })
            .attr('height', function (d) {                    
                return yScale(d.Column1);
            })
            .attr('width', function (d) {
                return xScale.rangeBand();
            })
            .attr('fill', 'steelblue');

}

以下是结果(基本上,波兰有美国数字,美国有波兰数字 编辑:我没有足够的代表发布图片,只有2个,我会尽快发布图表的屏幕截图

0 个答案:

没有答案