Çubuklar arasındaki D3 aralığı

Question

D3'te yeni yaşıyorum ve birisi münferit çubuklar arasında nasıl boşluk ekleyebileceğimi anlamaya çalışırken bana yardımcı olabileceğini umuyordu.

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, 420]); 

d3.select(".chart") 
    .selectAll("div") 
    .data(data) 
    .enter().append("div") 
    .style("width", function(d) { return x(d) + "px"; }) 
    .text(function(d) { return d; }); 

Böyle bir margin-top ver çubuk grafik https://bost.ocks.org/mike/bar/

Answer 1

oluşturmak için bu örneği takip ediyorum:

d3.select("#chart") 
    .selectAll("div") 
    .data(data) 
    .enter().append("div") 
    .style("width", function(d) { return x(d) + "px"; }) 
    .style("background-color", "red") 
    .style("margin-top", "10px") //give margin-top for spacing between bars 
    .text(function(d) { return d; }); 

çalışma kodu here

Answer 2

olanlar İşte kod DOM içinde div’lar barlar olarak bulunur, yani boşluk eklemek için geleneksel stilleri kullanabilirsiniz.

bu bölümü bulun:

.chart div { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
} 

ve aralık olmak çekmek istediğiniz margin: 1px; değiştirin.

Yine de dikkatli olmalısınız, çünkü genellikle d3, div'lerde değil SVG veya canvas öğelerinde çalışır. Bunun için, çubuk aralığını değiştirmek için yöntem farklı olurdu.

Answer 3

width = 100; deneyin .attr("width", width/data.length - 10) eklemek Yoksa örnekte olduğu gibi yaparsanız aslında bir .Style içinde margin-top kullanmayı düşünün vermedi dikey boşluk