D3 js遠程條形圖

Question

我是新來的d3 js。我正在尋找像this這樣的圖表，在高層圖上完成。在高層圖中，它被稱爲列範圍圖。有什麼辦法可以做到這一點。

當我在谷歌搜索，我可以得到的最好的東西是basic bar chart。任何人可以幫助我如何使它成爲一個遠程圖嗎？

Answer 1

想象我有數據集是這樣的：

//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$取決於質量。

讓我們做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; 
     }); 

現在對於過渡欄的寬度將是：

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. 
    }); 

全部工作代碼here。

Answer 2

您的基本條形圖鏈接不起作用。這看起來像一個水平條形圖，其中有很多exapmles。這裏是一個：http://bl.ocks.org/mbostock/2368837