Wie kann ich die Achsen-Ticks der d3 an meine Daten anpassen?

Hier ist mein Code:Wie kann ich die Achsen-Ticks der d3 an meine Daten anpassen?

<!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>

Ich kann nicht herausfinden, wie die y-Achse erhalten tickt die Daten übereinstimmen und mit den Stäben in einer Reihe aufstellen? ODER wie Sie in dem auskommentierten Code sehen können, kämpfte ich, um den Text zu erscheinen. Der korrekte Text (die Zahlen) würde in den Elementen in den Entwicklungswerkzeugen erscheinen, aber nicht auf der Seite. Jede Hilfe würde sehr geschätzt werden.

Quelle

2016-04-01 joeblack24

Dies ist kein D3-Problem, sondern ein Problem in Bezug auf Statistiken und Daten: Sie sagten: "Ich kann nicht herausfinden, wie die Y-Achsen-Ticks mit den Daten übereinstimmen", aber welche Daten? Da ist gar nichts!

Ihr Datensatz ist nur ein Array von 4 Werten. Wenn Sie für jeden Wert einen horizontalen Balken zeichnen möchten, wird auf der X-Achse eine quantitative Variable angezeigt (die Werte: 20, 40, 50, 60). Aber Ihre Y-Achse zeigt nur die verschiedenen Balken: kategorisch, nicht quantitativ. Sie können zum Beispiel Orangen, Äpfel, Bananen und Limetten für diese 4 Bars haben.

Also, Ihre y-Achse hat heightScale = d3.scale.ordinal() sein, statt linear, und Sie haben die kategorischen Werte der Balken zu setzen, wie ich mit einer Reihe von Objekten, hier tat

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

Danach stellen Sie die Domain wie folgt aus:

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

Dann Sie die y-Position nicht i * 100 Verwendung festlegen müssen. Stattdessen können Sie es in einer flexibleren Art und Weise festgelegt:

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

einfach die „Früchte“ ändern für Ihre Buchstaben (a, b, c, d) und Sie haben, was Sie wollen.

Quelle

2016-04-01 23:45:10

Ich habe die obigen Änderungen vorgenommen, außer – joeblack24

Mit Ausnahme der Y-Achse wird jetzt extrem lange auf der Seite zurückgegeben – joeblack24

Wie kann ich die Achsen-Ticks der d3 an meine Daten anpassen?

Antwort

Verwandte Themen