Javascript D3域和规模错误
(编辑,因为它是TLDR 2015年11月18日4:55) 我正在使用D3,我有两个例子,第一个非常完美,所有东西都匹配得很好,我的领域和范围都得到了完美的尊重 当我通过拉入一个JSON页面来添加动态数据时,我的域和范围不再受到尊重,我的条扩展到容器的高度甚至更远Javascript D3域和规模错误,javascript,d3.js,Javascript,D3.js,(编辑,因为它是TLDR 2015年11月18日4:55) 我正在使用D3,我有两个例子,第一个非常完美,所有东西都匹配得很好,我的领域和范围都得到了完美的尊重 当我通过拉入一个JSON页面来添加动态数据时,我的域和范围不再受到尊重,我的条扩展到容器的高度甚至更远 function Bar_Chart(graph_container, data_in, color){ var t = this this.width = $(graph_container).width()
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;
}
})
是什么导致动态数据超出了我设置的边界?员工年薪字段是一个字符串,而不是数字,因此查找最大值并不像您预期的那样有效。要解决此问题,请将第71行替换为:
this.y_scale.domain([0, d3.max(this.data, function(d,i) { return +d.employee_annual_salary ; })]);
区别在于
+
,根据JavaScript的合理操作理念,它将后面的值转换为数字。或者,在加载数据时执行此操作。能否将其缩小到一个最小的示例?很难看到完整示例中发生了什么。删除了第一个工作正常的代码段,但留下了示例链接。代码显示用于动态示例,该示例没有显示正确的行为。这完美地完成了任务。你可以在这里看到结果。如果你在芝加哥或发现自己在芝加哥,让我给你买杯啤酒。