D3 JS远程条形图 [英] D3 js ranged bar chart
问题描述
我是d3 js的新手.我正在寻找类似此的图表,该图表已在highcharts中完成.在高图中,它称为列范围图.有什么办法可以做到这一点.
I'm new to d3 js. I'm looking for a chart like this one done in highcharts. In highcharts it is called column range graph. Is there any way to achieve this.
当我在Google中搜索时,我能得到的最好的东西是基本条形图.谁能帮我把它做成一个有范围的图?
When I search in google the best thing I can get is a basic bar chart. Can any one help me how to make it a ranged graph?
推荐答案
想象一下我有这样的数据集:
Imagine I have dataset like this:
//these are the various categories
var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation', 'Home Audio', 'Office Electronics', 'Portable Audio', 'Portable Video', 'Security & Surveillance', 'Service', 'Television & Video', 'Car & Vehicle'];
//these are the various categories cost
var dollars = [[100,213], [75,209], [50,190], [100,179], [140,156], [138, 209], [90, 190], [65,179], [100, 213], [100, 209], [50, 190], [76,179], [45,156], [80,209], [75,190], [55,190]];
数据集Car&Vehicle
中的成本范围为55$ to 190$
.根据质量,这里Television & Video
的费用范围为75$ to 190$
.
Here in the dataset Car&Vehicle
will have a cost range from 55$ to 190$
. Here Television & Video
will have a cost range from 75$ to 190$
depending on quality.
让我们做x缩放.
var xscale = d3.scale.linear()
.domain([10, 250])//minimum cast can be 10$ and maximum cost 250$
.range([0, 722]);
让我们制作矩形条.
var chart = canvas.append('g')
.attr("transform", "translate(150,0)")
.attr('id', 'bars')
.selectAll('rect')
.data(dollars)
.enter()
.append('rect')
.attr('height', 19)
.attr({
'x': function(d) {
return xscale(d[0]);//this defines the start position of the bar
},
'y': function(d, i) {
return yscale(i) + 19;
}
})
.style('fill', function(d, i) {
return colorScale(i);
})
.attr('width', function(d) {
return 0;
});
现在进行过渡时,条形的宽度将为:
Now for transition the width of the bar will be:
var transit = d3.select("svg").selectAll("rect")
.data(dollars)
.transition()
.duration(1000)
.attr("width", function(d) {
return xscale(d[1]) - xscale(d[0]);//width of the bar will be upper range - lower range.
});
完整的工作代码此处.
这篇关于D3 JS远程条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!