Javascript 使用不同值和不同数据大小更新D3柱状图 背景
我正在尝试使用创建一个可重用的图表对象。我已经设置了一个Javascript 使用不同值和不同数据大小更新D3柱状图 背景,javascript,charts,svg,d3.js,Javascript,Charts,Svg,D3.js,我正在尝试使用创建一个可重用的图表对象。我已经设置了一个chart()函数来生成柱状图。在任何列上单击事件时,图表将使用新的随机数据数组进行更新,该数组将包含随机数目的数据点(即,原始图表可能有8列,但更新后可能有20列或4列) 问题 假设我的原始数据集中有8个数据点(因此有8列)。当我用随机数据更新图表时,列会根据新值适当调整其高度,但不会添加新的条形图。此外,当列的宽度适当调整以适应容器的宽度和新的数据点数量时,如果该数据点数量小于原始集,则原始数据集中的一些列将一直保留,直到数据点数量大于
chart()
函数来生成柱状图。在任何列上单击事件时,图表将使用新的随机数据数组进行更新,该数组将包含随机数目的数据点(即,原始图表可能有8列,但更新后可能有20列或4列)
问题
假设我的原始数据集中有8个数据点(因此有8列)。当我用随机数据更新图表时,列会根据新值适当调整其高度,但不会添加新的条形图。此外,当列的宽度适当调整以适应容器的宽度和新的数据点数量时,如果该数据点数量小于原始集,则原始数据集中的一些列将一直保留,直到数据点数量大于或等于原始数据集
我的最终目标是动态添加新数据或动态删除新数据计数范围之外的旧数据。
我已经创造了一个行为模式。您可能需要多次单击这些列才能看到我描述的行为。此外,我还将代码粘贴到下面
提前谢谢
function chart(config) {
// set default options
var defaultOptions = {
selector: '#chartZone',
class: 'chart',
id: null,
data: [1,2,6,4, 2, 6, 7, 2],
type: 'column',
width: 200,
height: 200,
callback: null,
interpolate: 'monotone'
};
// fill in unspecified settings in the config with the defaults
var settings = $.extend(defaultOptions, config);
function my() { // generate chart with this function
var w = settings.width,
h = settings.height,
barPadding = 3,
scale = 10,
max = d3.max(settings.data);
var svg = d3.select(settings.selector) // create the main svg container
.append("svg")
.attr("width",w)
.attr("height",h);
var y = d3.scale.linear().range([h, 0]),
yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),
x = d3.scale.linear().range([w, 0]);
y.domain([0, max]).nice();
x.domain([0, settings.data.length - 1]).nice();
var rect = svg.selectAll("rect")
.data(settings.data)
.enter()
.append("rect")
.attr("x", function(d,i) {
return i * (w / settings.data.length);
})
.attr("y", function(d) {
return h - h * (d / max);
})
.attr("width", w / settings.data.length - barPadding)
.attr("height", function(d) {
return h * (d / max);
})
.attr("fill", "rgb(90,90,90)");
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-4,0)")
.call(yAxis);
svg.on("click", function() {
var newData = [], maxCap = Math.round(Math.random() * 100);
for (var i = 0; i < Math.round(Math.random()*100); i++) {
var newNumber = Math.random() * maxCap;
newData.push(Math.round(newNumber));
}
newMax = d3.max(newData);
y.domain([0, newMax]).nice();
var t = svg.transition().duration(750);
t.select(".y.axis").call(yAxis);
rect.data(newData)
.transition().duration(750)
.attr("height", function(d) {
return h * (d / newMax);
})
.attr("x", function(d,i) {
return i * (w / newData.length);
})
.attr("width", w / newData.length - barPadding)
.attr("y", function(d) {
return h - h * (d / newMax);
});
});
}
my();
return my;
}
var myChart = chart();
功能图(配置){
//设置默认选项
var defaultOptions={
选择器:“#图表区”,
班级:'图表',
id:null,
数据:[1,2,6,4,2,6,7,2],
键入:“列”,
宽度:200,
身高:200,
回调:null,
插入:“单调”
};
//使用默认值在配置中填写未指定的设置
var设置=$.extend(defaultOptions,config);
函数my(){//使用此函数生成图表
var w=设置。宽度,
h=设置。高度,
barPadding=3,
比例=10,
max=d3.max(设置.数据);
var svg=d3.select(settings.selector)//创建主svg容器
.append(“svg”)
.attr(“宽度”,w)
.attr(“高度”,h);
变量y=d3.scale.linear()范围([h,0]),
yAxis=d3.svg.axis().scale(y).ticks(5).orient(“left”),
x=d3.刻度.线性范围([w,0]);
y、 域([0,max]).nice();
x、 域([0,settings.data.length-1]).nice();
var rect=svg.selectAll(“rect”)
.data(设置.数据)
.输入()
.append(“rect”)
.attr(“x”,函数(d,i){
返回i*(带设置.数据.长度);
})
.attr(“y”,函数(d){
返回h-h*(d/max);
})
.attr(“宽度”,w/settings.data.length-barPadding)
.attr(“高度”,功能(d){
返回h*(d/max);
})
.attr(“填充”、“rgb(90,90,90)”);
append(“svg:g”)
.attr(“类”、“y轴”)
.attr(“转换”、“转换(-4,0)”)
.呼叫(yAxis);
打开(“单击”,函数(){
var newData=[],maxCap=Math.round(Math.random()*100);
for(var i=0;i
这里实际上发生了两件事—正如您所指出的,新数据范围之外的数据不会被删除,但现有数据范围之外的新数据也不会被添加。这一切都与您在代码中修改的选择有关-您的更新功能应该使用enter()
和exit()
选择来处理这些-请参阅
这里有一个更新的fiddle:我不熟悉D3.js,但可能只有当条数不变时,转换才有效。i、 e.只有高度可以改变。