D3 Scale-Domäne wird nicht mit ausgewählten Daten aktualisiert. Ich bekomme negative Werte

Question

Erstes Schreiber. Langzeitleser. Neuer Programmierer.

Ich habe ein Balkendiagramm, das anhand der in einem Dropdown-Menü ausgewählten Ergebnisse aktualisiert wird. Wenn ich die Selection ändere, bekomme ich negative "y" -Werte. Es scheint, dass meine Domain nicht mit den neuen Daten aktualisiert wird. Wenn ich die Domäne fest codiere, ist mein "y" das, was ich von ihnen erwarte. Wer weiß warum? Alle anderen Kommentare (Formatierung usw.) wurden begrüßt. Hier

var new_data; 

//Create SVG margins and patting for the interior 
var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

//Create Scale 
var xScale = d3 
     .scale 
     .ordinal() 
     .rangeRoundBands([margin.left, width], .1); 
     ; 

var yScale = d3 
     .scale 
     .linear() 
     .range([height, 0]) 
     ; 


var xAxis = d3 
        .svg 
        .axis() 
        .scale(xScale) 
        .orient("bottom") 
        .tickPadding([5]) 
        ; 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(10) 
    ; 

//Create SVG with the above specs 
var svg = d3.select("#container") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    ; 

svg 
    .append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    ; 

svg 
     .append("g") 
     .attr("class", "y axis") 
     .append("text") // just for the title (ticks are automatic) 
      .attr("transform", "rotate(-90)") // rotate the text! 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("frequency") 
     ; 

var temp = svg 
     .append("g") 
     .attr("class", "domx") 
     ; 



d3.csv("data3.csv", function(error, csv_data) { 

// Filter the dataset to only get dept_1 
var new_data = csv_data.filter(function(d) { 
      return d['dept'] == 'dept_1'; 
     }); 

// function to handle histogram. 
function histoGram(new_data){ 

//Create Scales 
xScale 
    .domain(new_data.map(function(d) {return d.Pos;})) 
    ; 

yScale 
    // .domain([0, d3.max(new_data, function(d) { return d.Value; })]) 
    .domain([0, d3.max(new_data, function(d) { return d.Value; })])  
    // .domain([0, 20]) 
    ; 

svg 
    .select(".x.axis") 
    .transition() 
    .duration(1500) 
    .call(xAxis) 
    ; 

svg 
    .select(".y.axis") 
    .transition() 
    .duration(1500) 
    .call(yAxis) 
    ; 

// Data Join  
var MyGroups = temp 
     .selectAll("g") 
     .data(new_data); 
     ; 

var MyGroupsEnter = MyGroups 
           .enter() 
           .append("g") 
           ; 

//Update 
    MyGroups 
     .attr("class", "update") 
     ; 

//Enter 
MyGroupsEnter 
     .append("rect") 
     .attr("class", "enter") 
     .attr("x", function(d) { return xScale(d.Pos); }) 
     .attr("y", function(d) { return (yScale(d.Value));}) 
     .attr("width", xScale.rangeBand()) 
     .attr("height", function(d) { return (height - yScale(d.Value)); }) 
     .text(function(d) { return d.Value; }) 
     .attr("fill", function(d) {return "rgb(0, 0, 0)";}) 
     .style("fill-opacity", 0.2) 
     ; 

MyGroupsEnter 
      .append("text") 
      .attr("class", "text") 
      .text(function(d) { return d.Value; }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "black") 
      .attr("text-anchor", "middle") 
      .attr("x", function(d) { return xScale(d.Pos) + xScale.rangeBand()/2; }) 
      .attr("y", function(d) { return yScale(d.Value) - 10; }) 
     ; 

//Enter + Update 
    MyGroups 
     .transition() 
     .duration(1500) 
     .select("rect") 
     .attr("x", function(d) { return xScale(d.Pos); }) 
     .attr("width", xScale.rangeBand()) 
     .attr("y", function(d) { return (yScale(d.Value));}) 
     .attr("height", function(d) { return (height - yScale(d.Value)); }) 
     .text(function(d) { return d.Value; }) 
     .style("fill-opacity", 1) // set the fill opacity 
     .attr("fill", function(d) {return "rgb(0, 0, " + (d.Value * 30) + ")";}) 
     ; 

    MyGroups 
     .transition() 
     .duration(1500) 
     .select("text") 
     .attr("class", "text") 
     .text(function(d) { return d.Value; }) 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "11px") 
     .attr("fill", "black") 
     .attr("text-anchor", "middle") 
     .attr("x", function(d) { return xScale(d.Pos) + xScale.rangeBand()/2; }) 
     .attr("y", function(d) { return yScale(d.Value) - 8; }) 
     ; 

MyGroups 
     .exit() 
     .transition() 
     .duration(1500) 
     .remove() 
     ; 

} 

histoGram(new_data); 


var options = ["dept_1","dept_2","dept_3"]; 

var dropDown = d3 
         .select("#sel_button") 
         .append("select") 
         .attr("name", "options-list") 
         .attr("id", "id-name"); 

var options = dropDown 
         .selectAll("option") 
         .data(options) 
         .enter() 
         .append("option"); 

    options 
     .text(function (d) { return d; }) 
     .attr("value", function (d) { return d; }); 

d3.select("#id-name") 
    .on("change", function() { 
     var value = d3.select(this).property("value"); 
     var new_data2 = csv_data.filter(function(d) { 
      return d['dept'] == value; 
     }); 
     histoGram(new_data2); 
    }); 

});   

sind die Daten:

dept,Pos,Value 
dept_1,d1_p1,1 
dept_1,d1_p10,10 
dept_1,d1_p11,11 
dept_1,d1_p12,12 
dept_2,d2_p1,1.5 
dept_2,d2_p2,3 
dept_2,d2_p3,4.5 
dept_2,d2_p4,6 
dept_2,d2_p5,7.5 
dept_2,d2_p6,9 
dept_2,d2_p7,10.5 
dept_2,d2_p8,12 
dept_2,d2_p9,13.5 
dept_2,d2_p10,15 
dept_2,d2_p11,16.5 
dept_2,d2_p12,17.5 
dept_2,d2_p13,18.5 
dept_3,d3_p1,5 
dept_3,d3_p2,7 
dept_3,d3_p3,10 

Answer 1

Firgured heraus, was mein Problem war. Ich hatte das Format der Werte nicht definiert. Die max-Funktion gab die maximale Anzahl der Zeichenwerte zurück (9). Ich habe den folgenden Code vor der Domain-Funktion hinzugefügt und alles funktioniert jetzt gut.

csv_data.forEach(function(d) { 
    d.dept = d.dept; 
    d.Pos = d.Pos; 
    d.Value = +d.Value; 
    });