Question

（编辑因为它是TLDR NOV 18,2015 4:55）

我正在使用D3我有两个例子，第一个非常完美，一切都很好，我的领域和范围都得到了很好的尊重

http://codepen.io/MichaelArledge/pen/ZbPvWG

当我通过拉入JSON页面来添加动态数据时，我的域名和范围不再受到尊重，我的栏位扩展到容器的高度以及

      function Bar_Chart(graph_container, data_in, color){

  var t = this
  this.width = $(graph_container).width();
  this.height= $(graph_container).height();

  this.margin = {top: 20, right: 20, bottom: 30, left: 40};

  this.color_scale = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

  this.new_width = this.width - this.margin.left - this.margin.right;
  this.new_height = this.height - this.margin.top - this.margin.bottom;

  //MIGHT BECOME DYNAMIC
  this.data = data_in;

  this.x_scale = d3.scale.ordinal().rangeBands([0, this.new_width],0.05);
  this.y_scale = d3.scale.linear().range([this.new_height, 0]);  

  this.x_axis = d3.svg.axis()
      .scale(this.x_scale)
      .orient("bottom");

  this.y_axis = d3.svg.axis()
      .scale(this.y_scale)
      .orient("left");

  this.svg = d3.select(graph_container).append("svg")
      .attr("width", this.width )
      .attr("height", this.height)
        .append("g")
        .attr("transform", 
          "translate(" + t.margin.left + "," + t.margin.top + ")");

  this.svg.append("g")
      .attr("class", "x_axis")
      .attr("transform", "translate(0," + this.new_height + ")");

  this.svg.append("g")
      .attr("class", "y_axis");

  this.rects;

  d3.json(this.data, function(error, json) {

    if (error) return console.warn(error);

    t.data = json.slice(0,100);
    t.init()
});


}

Bar_Chart.prototype = {

  constructor:Bar_Chart,

  init:function(){

  console.log(this.data);
    this.consume_data(this.data);


  },
  consume_data(data_in){

    this.data = data_in;
    this.x_scale.domain(this.data.map(function(d,i) { return i}));
    this.y_scale.domain([0, d3.max(this.data, function(d,i) { return d.employee_annual_salary ; })]);

    this.render_data()

  },


  render_data:function(){

    var t= this;
    var rect_width = this.new_width / this.data.length;

    render_axis();
    this.rects = this.svg.selectAll("rect").data(this.data); 

    this.rects.enter().append("rect")
      .attr("x",  function(d,i){return rect_width*i } )
      .attr("y", this.new_height)
      .attr("width",   this.x_scale.rangeBand()  )
      .attr("height",0)
      .attr("fill", function(d){ return t.color_scale(d.department)  })

    this.rects
      .transition()
      .duration(1000)
      .attr("x",  function(d,i){return rect_width*i } )
      .attr("y", function(d) { return  t.y_scale(d.employee_annual_salary)  })
      .attr("width",   this.x_scale.rangeBand()  )
      .attr("height", function(d,i){ return (t.new_height - t.y_scale(d.employee_annual_salary) )})


    this.rects.exit()
      .transition()
      .duration(2000)
      .attr("y", this.new_height)
      .attr("height",0)
      .remove();


      function render_axis(){
        t.svg.select(".x_axis").transition().call(t.x_axis);
        t.svg.select(".y_axis").transition().call(t.y_axis);

      }

  },



}


var arr_one = [4564.54546546542, 8465.72454654654786,3459.9546546546444,7544.744654553,9457.18686,6546.246546559]
var arr_two = [945367.78673,456456457.7867756453,9956456.75699,646456.78678678]
var color_one = "rebeccapurple";
var color_two = "blue";


var b_chart = new Bar_Chart("#chart", "https://data.cityofchicago.org/resource/xzkq-xp2w.json");
var clicked = false;
/*
$('body').on("click", function(){
  if(clicked){
     b_chart.consume_data(arr_one);  
    clicked = false;
  }else{
     b_chart.consume_data(arr_two);  
    clicked = true;
  }

})

http://codepen.io/MichaelArledge/pen/yYwpVy?editors=101

是什么导致动态数据扩散到我设定的边界之外？

Answer 1

employee_annual_salary字段是一个字符串，而不是一个数字，因此找到最大值并不像您期望的那样有效。要解决此问题，请将第71行替换为：

this.y_scale.domain([0, d3.max(this.data, function(d,i) { return +d.employee_annual_salary ; })]);

差异是+，它通过JavaScript的合理操作的想法，将其后的值转换为数字。或者，在加载数据时执行此操作。

D3 Domain and Scale Bug

1 个答案: