Verilerimle eşleştirmek için d3 ekseni işaretlerini nasıl alabilirim?

İşte benim kod:Verilerimle eşleştirmek için d3 ekseni işaretlerini nasıl alabilirim?

<!doctype html> 
<html> 
<head> 
    <title>D3</title> 
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

</head> 
<body> 
    <script> 

    var dataArray=[{"letter":"a", "value":20}, 
       {"letter":"b", "value":40}, 
       {"letter":"c", "value":50}, 
       {"letter":"m", "value":60}]; 
console.log(dataArray) 

var width=500; 
var height=500; 

var widthScale=d3.scale.linear() 
      .domain([0, 60]) 
      .range([0, width]); 

var heightScale=d3.scale.ordinal() 
      .domain(dataArray.map(function(d){ return d.letter })) 
      .range([0,height-125]); 

var letterScale=d3.scale.linear() 
     .domain([0,26]) 
     .range(["A","B","c","d"]) 

var color=d3.scale.linear() 
      .domain([0,60]) 
      .range(["red", "blue"]); 

var x_axis=d3.svg.axis() 
     .orient("bottom") 
     .ticks(12) 
     .scale(widthScale); 

var y_axis=d3.svg.axis() 
     .orient("left") 
     .ticks(4) 
     .tickFormat(function (d) {return d}) 
     .scale(heightScale); 

var canvas=d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(25, 0)"); 

var bars=canvas.selectAll("rect") 
     .data(dataArray) 
     .enter() 
      .append("rect") 
       .attr("width", function(d) {return widthScale(d.value);}) 
       .attr("height", 50) 
       .attr("fill", function(d) {return color(d.value)}) 
       .attr("y", function(d, i) {return i*100}); 
// bars.append("text") 
//  .attr("x", function(d) {return widthScale(d)/2}) 
//  .attr("y", function(d) {return -heightScale(d)}) 
//  .style("stroke-width", 6) 
//  .style("text-anchor", "middle") 
//  .style("font-size", "34px") 
//  .style("fill", "black") 
//  .text(function(d) {return console.log(d);}); 

canvas.append("g") 
    .attr("transform", "translate(5, 375)") 
    .call(x_axis); 

canvas.append("g") 
    .attr("transform", "translate(5,0)") 
    .call(y_axis) 

    </script> 
</body> 
</html>

Ben nasıl bilemiyorum y ekseni verileri eşleştirmek ve barları ile hizaya getirmek keneler? VEYA yorumlanmış çıkış kodunda görebileceğiniz gibi, metnin görünmesini sağlamaya çalıştım. Doğru metin (sayılar), dev araçlardaki öğelerde görünür, ancak sayfada görünmez. Herhangi bir yardım büyük takdir edilecektir.

kaynak

2016-04-01 joeblack24

Bu bir D3 sorunu değil, istatistik ve dataviz ile ilgili bir sorun: "Verilerle eşleştirmek için y ekseninin nasıl girileceğini anlayamıyorum", ancak hangi veriler? Hiçbiri yok!

Veri kümeniz yalnızca 4 değerden oluşan bir dizidir. Her bir değer için bir yatay çubuk çizmek isterseniz, x ekseni niceliksel bir değişken gösterecektir (değerler: 20, 40, 50, 60). Ancak, y ekseniniz yalnızca farklı çubukları gösterir: kategorili, sayısal değil. Bu 4 bar için örneğin portakal, elma, muz ve limes olabilir.

Yani, y ekseni heightScale = d3.scale.ordinal() yerine linear olmak zorunda ve ben nesneleri bir dizi burada yaptığımız gibi barlar kategorik değerleri ayarlamak zorunda:

var dataArray = [ 
    { 
     "fruit": "orange", 
     "value": 20 
    }, 
    { 
     "fruit": "apple", 
     "value": 40 
    }, 
    { 
     "fruit": "banana", 
     "value": 50 
    }, 
    { 
     "fruit": "lime", 
     "value": 60 
    } 
]

Bundan sonra , böyle etki alanını ayarlamak:

heightScale.domain(dataArray.map(function(d){ return d.fruit }));

Sonra i * 100 kullanarak y konumunu ayarlamak gerek yoktur. Bunun yerine, daha esnek bir şekilde ayarlayabilirsiniz:

.attr("y", function(d){ return heightScale(d) });

Sadece harfler (a, b, c, d) için "meyve" değiştirmek ve ne istediğinizi gerekecek.

kaynak

2016-04-01 23:45:10

Yukarıdaki değişiklikleri yaptım, – joeblack24

hariç Y ekseni dışında artık sayfa son derece uzun dönüyor – joeblack24

Verilerimle eşleştirmek için d3 ekseni işaretlerini nasıl alabilirim?

cevap

İlgili konular