Soru Negatif değerler içeren çubuk grafiği


Negatif değerlere sahip bir d3 çubuk grafik oluşturmam gerekiyor. İdeal olarak, eksen sıfır pozisyonu, verilerin kapsamına göre hesaplanmalıdır, fakat simetrik pozitif ve negatif ölçüde varsayan, yani her zaman çizelgenin ortasında olacağı bir çözüme yerleşirdim.

İşte başarmak istediğim bir örnek.

Bar chart with negative values


25
2018-04-12 16:04


Menşei




Cevaplar:


Tamam, veri kümeniz olarak bir dizi numaranız olduğunu ve bunun bazı pozitif ve negatif değerler içerdiğini varsayalım:

var data = [-15, -20, -22, -18, 2, 6, -26, -18];

Bir çubuk grafik oluşturmak için iki ölçek isteyeceksiniz. Bir niceliksel ölçeğe ihtiyacınız var (genellikle doğrusal ölçek) boyunca çubuk pozisyonlarını hesaplamak x-axis ve bir saniye sıralı ölçek boyunca çubuk pozisyonlarını hesaplamak için y-Axis.

Nicel ölçek için, genellikle verilerinizin etki alanını, minimum ve maksimum değere dayanarak hesaplamanız gerekir. Bunu yapmanın kolay bir yolu d3.extent:

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

Ayrıca isteyebilirsiniz Güzel ölçeği biraz genişletmek için. Başka bir örnek olarak, bazen sıfır değerinin tuvalin ortasında ortalanmasını istediğinizde, bu durumda minimum ve maksimum değerin daha büyük olmasını istersiniz:

var x0 = Math.max(-d3.min(data), d3.max(data));

var x = d3.scale.linear()
    .domain([-x0, x0])
    .range([0, width])
    .nice();

Alternatif olarak, istediğiniz herhangi bir alanı sabit kodlayabilirsiniz.

var x = d3.scale.linear()
    .domain([-30, 30])
    .range([0, width]);

İçin y-axis kullanmak isteyeceksiniz rangeRoundBands Her bir çubuk için dikey alanı bantlara bölmek. Bu ayrıca çubuklar arasındaki dolgu miktarını belirlemenizi sağlar. Çoğu zaman, bir tanımlayıcı veri ile bir ad veya benzersiz bir kimlik gibi sıralı bir ölçek kullanılır. Bununla birlikte, veri dizini ile birlikte sıralı ölçekler de kullanabilirsiniz:

var y = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeRoundBands([0, height], .2);

Artık iki skala elde ettiniz, çubukları görüntülemek için rect elemanlarını yaratabilirsiniz. Tek zor kısmı, SVG'de, rektlerin konumlandırılmasıdır ( x ve y öznitelikleri, sol üst köşelerine göre. Yani kullanmamız gerek x- ve yÜst sol köşenin konumunu hesaplamak için ölçekler ve ilişkili değerin pozitif mi yoksa negatif mi olduğuna bağlı olarak değişir: Değer pozitifse, veri değeri çubuğun sağ kenarını belirler, negatif ise Çubuğun sol kenarını belirler. Dolayısıyla, burada şartlı koşullar:

svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d, i) { return x(Math.min(0, d)); })
    .attr("y", function(d, i) { return y(i); })
    .attr("width", function(d, i) { return Math.abs(x(d) - x(0)); })
    .attr("height", y.rangeBand());

Son olarak, üstte onay işaretlerini görüntülemek için bir eksen ekleyebilirsiniz. Pozitif ve negatif değerlerin görünümünü farklılaştırmak için bir dolgu stili (veya bir degrade) de hesaplayabilirsiniz. Hepsini bir araya koy:


53
2018-04-12 16:28