javascript - D3 比例域不会使用所选数据进行更新。我得到负值

Question

我有一个条形图，它根据下拉菜单中选择的结果进行更新。当我更改选择时，我得到负“y”值。我的域似乎没有使用新数据进行更新。当我对域进行硬编码时，我的“y”就是我所期望的。有人知道为什么吗？欢迎任何其他评论(格式等)。

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);
    });

 });        

这是数据:

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

弄清楚我的问题是什么。我没有定义值的格式。 max 函数返回字符值中的最大数量 (9)。我在域函数之前添加了以下代码，现在一切正常。

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