我正在尝试使用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个,我会尽快发布图表的屏幕截图