D3.js d3堆叠钢筋，钢筋不'；在过渡期内不更新
在这个问题的顺序（）中，我应用了一个转换来使用D3更改堆叠条形图的数据 我的轴对于这个新数据集有一个完美的过渡和修改，但是水平条仍然没有被触及。 我从Lars（）尝试过这个解决方案，但我仍然可以看到条带发生了变化 我的代码：D3.js d3堆叠钢筋，钢筋不'；在过渡期内不更新,d3.js,transitions,stacked-chart,D3.js,Transitions,Stacked Chart,在这个问题的顺序（）中，我应用了一个转换来使用D3更改堆叠条形图的数据 我的轴对于这个新数据集有一个完美的过渡和修改，但是水平条仍然没有被触及。 我从Lars（）尝试过这个解决方案，但我仍然可以看到条带发生了变化 我的代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" class="ocks-org do-not-copy"> <head> <link rel="styles
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="ocks-org do-not-copy">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div><button class="btn btn-mini" id="backButton" onclick="updateData();">Update</button></div>
<div id="timeLine"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var timeline;
var margin = {
top : 20,
right : 10,
bottom : 60,
left : 80
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.rangeRound([0, width]);
var y = d3.scale.ordinal()
.rangeBands([height, 0], 0.1);
var color = d3.scale.ordinal()
.range(["#1f77b4", "#2ca02c", "#E53524"]);
//var color = d3.scale.category10()
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.format(".2s"))
.ticks(10);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
timeline = d3.select("#timeLine").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 + ")")
var dataSet;
dataSet = [{
"Date" : "2014-01",
"insert" : "2",
"remove" : "17",
"updates" : "27"
}, {
"Date" : "2014-02",
"insert" : "27",
"remove" : "127",
"updates" : "47"
}, {
"Date" : "2014-03",
"insert" : "227",
"remove" : "17",
"updates" : "42"
}, {
"Date" : "2014-04",
"insert" : "0",
"remove" : "0",
"updates" : "0"
}, {
"Date" : "2014-05",
"insert" : "127",
"remove" : "1",
"updates" : "423"
},
];
color.domain(d3.keys(dataSet[0]).filter(function (key) {
return key !== "Date";
}));
dataSet.forEach(function (d) {
var x0 = 0;
d.ages = color.domain().map(function (name) {
return {
name : name,
x0 : x0,
x1 : x0 += +d[name]
};
});
d.total = d.ages[d.ages.length - 1].x1;
});
yAxis.tickFormat(function (d) {
var val = 0;
dataSet.forEach(function (item) {
if (item.Date == d)
val = item.total;
});
return val == 0 ? "" : d;
});
y.domain(dataSet.map(function (d) {
return d.Date;
}));
x.domain([0, d3.max(dataSet, function (d) {
return (d.total + 5);
})]);
timeline.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 1)
.attr("dx", "42em")
.attr("dy", "3em")
.style("text-anchor", "end")
.text("Operations");
timeline.append("g")
.attr("class", "y axis")
.call(yAxis);
var layer = timeline.selectAll(".state")
.data(dataSet)
.enter().append("g")
.attr("class", "rect")
.attr("transform", function (d) {
return "translate(0," + y(d.Date) + ")";
});
var rect = layer.selectAll("rect")
.data(function (d) {
return d.ages;
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", 0)
.attr("x", width)
.attr('y', function (d, i) {
return y(d.Date);
})
.attr("height", y.rangeBand())
.style("fill", function (d) {
return color(d.name);
});
rect.transition()
.duration(600)
.delay(function (d, i) {
return i * 300;
})
.attr("width", function (d) {
return x(d.x1) - x(d.x0);
})
.attr("x", function (d) {
return x(d.x0);
});
function updateData() {
dataSet = [{
"Date" : "2014-11",
"insert" : "27",
"remove" : "1723",
"updates" : "7"
}, {
"Date" : "2014-12",
"insert" : "237",
"remove" : "12",
"updates" : "433"
}, {
"Date" : "2015-03",
"insert" : "22",
"remove" : "172",
"updates" : "423"
}, {
"Date" : "2015-05",
"insert" : "17",
"remove" : "122",
"updates" : "42"
}, {
"Date" : "2015-04",
"insert" : "0",
"remove" : "0",
"updates" : "0"
}
];
dataSet.forEach(function (d) {
var x0 = 0;
d.ages = color.domain().map(function (name) {
return {
name : name,
x0 : x0,
x1 : x0 += +d[name]
};
});
d.total = d.ages[d.ages.length - 1].x1;
});
yAxis.tickFormat(function (d) {
var val = 0;
dataSet.forEach(function (item) {
if (item.Date == d)
val = item.total;
});
return val == 0 ? "" : d;
});
y.domain(dataSet.map(function (d) {
return d.Date;
}));
x.domain([0, d3.max(dataSet, function (d) {
return (d.total + 5);
})]);
// Make the changes
var transition = timeline.transition().duration(750),
delay = function (d, i) {
return i * 50;
};
// update bars
//var teste = timeline.selectAll(".state").data(dataSet);
var layer = timeline.selectAll(".state").data(dataSet).enter().append("g")
.attr("class", "rect")
.attr("transform", function (d) {
return "translate(0," + y(d.Date) + ")";
});
var sel = layer.selectAll("rect")
.data(function (d) {
return d.ages;
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", 0)
.attr("x", width)
.attr('y', function (d, i) {
return y(d.Date);
})
//.attr("height", y.rangeBand())
.attr("height", y.rangeBand())
.style("fill", function (d) {
return color(d.name);
});
//remove bars no longer present - DON'T WORK
//sel.exit().remove();
sel.transition()
.duration(600)
.delay(function (d, i) {
return i * 300;
})
.attr("x", function (d) {
return x(d.x0);
}).attr("width", function (d) {
return x(d.x1) - x(d.x0);
})
.attr('y', function (d, i) {
return y(d.Date);
})
.attr("height", y.rangeBand());
transition.select(".y.axis") // change the y axis
.call(yAxis);
transition.select(".x.axis") // change the x axis
.call(xAxis);
}
</script>
</body>
</html>
更新
var时间线；
var保证金={
前20名，
右:10,，
底数：60，
左：80
},
宽度=500-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scale.linear（）
.rangeRound（[0，宽度]）；
变量y=d3.scale.ordinal（）
.范围带（[高度，0]，0.1）；
var color=d3.scale.ordinal（）
.范围（[“#1f77b4”、“#2ca02c”、“#E53524”]）；
//var color=d3.scale.category10（）
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tickFormat（d3.format（“.2s”））
.蜱（10）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（5）；
timeline=d3。选择（“timeline”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
var数据集；
数据集=[{
“日期”：“2014-01”，
“插入”：“2”，
“删除”：“17”，
“更新”：“27”
}, {
“日期”：“2014-02”，
“插入”：“27”，
“删除”：“127”，
“更新”：“47”
}, {
“日期”：“2014-03”，
“插入”：“227”，
“删除”：“17”，
“更新”：“42”
}, {
“日期”：“2014-04”，
“插入”：“0”，
“删除”：“0”，
“更新”：“0”
}, {
“日期”：“2014-05”，
“插入”：“127”，
“删除”：“1”，
“更新”：“423”
},
];
color.domain（d3.keys（数据集[0]）过滤器（函数（键）{
返回键！=“日期”；
}));
dataSet.forEach（函数（d）{
var x0=0；
d、 ages=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
x0:x0，
x1:x0+=+d[名称]
};
});
d、 总计=d.ages[d.ages.length-1].x1；
});
yAxis.tick格式（函数（d）{
var=0；
dataSet.forEach（函数（项）{
如果（item.Date==d）
val=项目总数；
});
返回值==0？“：d；
});
y、 域（dataSet.map）（函数（d）{
返回日期；
}));
x、 域（[0，d3.max）（数据集，函数（d）{
回报率（d.total+5）；
})]);
时间线。附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.append（“文本”）
.attr（“x”，1）
.attr（“dx”，“42em”）
.attr（“dy”、“3em”）
.style（“文本锚定”、“结束”）
.文本（“操作”）；
时间线。附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
变量层=时间线。选择全部（“.state”）
.数据（数据集）
.enter（）.append（“g”）
.attr（“类”、“rect”）
.attr（“转换”，函数（d）{
返回“translate（0），+y（d.Date）+”）；
});
var rect=layer.selectAll（“rect”）
.数据（功能（d）{
返回d.ages；
})
.enter（）.append（“rect”）
.attr（“类”、“rect”）
.attr（“宽度”，0）
.attr（“x”，宽度）
.attr（'y'，函数（d，i）{
返回y（截止日期）；
})
.attr（“高度”，y.rangeBand（））
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
rect.transition（）
.持续时间（600）
.延迟（功能（d，i）{
返回i*300；
})
.attr（“宽度”，函数（d）{
返回x（d.x1）-x（d.x0）；
})
.attr（“x”，函数（d）{
返回x（d.x0）；
});
函数updateData（）{
数据集=[{
“日期”：“2014-11”，
“插入”：“27”，
“删除”：“1723”，
“更新”：“7”
}, {
“日期”：“2014-12”，
“插入”：“237”，
“删除”：“12”，
“更新”：“433”
}, {
“日期”：“2015-03”，
“插入”：“22”，
“删除”：“172”，
“更新”：“423”
}, {
“日期”：“2015-05”，
“插入”：“17”，
“删除”：“122”，
“更新”：“42”
}, {
“日期”：“2015-04”，
“插入”：“0”，
“删除”：“0”，
“更新”：“0”
}
];
dataSet.forEach（函数（d）{
var x0=0；
d、 ages=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
x0:x0，
x1:x0+=+d[名称]
};
});
d、 总计=d.ages[d.ages.length-1].x1；
});
yAxis.tick格式（函数（d）{
var=0；
dataSet.forEach（函数（项）{
如果（item.Date==d）
val=项目总数；
});
返回值==0？“：d；
});
y、 域（dataSet.map）（函数（d）{
返回日期；
}));
x、 域（[0，d3.max）（数据集，函数（d）{
回报率（d.total+5）；
})]);
//做出改变
var transition=timeline.transition（）.持续时间（750），
延迟=功能（d，i）{
返回i*50；
};
//更新栏
//var teste=timeline.selectAll（“.state”）.data（数据集）；
var layer=timeline.selectAll（“.state”）.data（数据集）.enter（）.append（“g”）
.attr（“类”、“rect”）
.attr（“转换”，函数（d）{
返回“translate（0），+y（d.Date）+”）；
});
var sel=图层。选择全部（“rect”）
.数据（功能（d）{
返回d.ages；
})
.enter（）.append（“rect”）
.attr（“类”、“rect”）
.attr（“宽度”，0）
.attr（“x”，宽度）
.attr（'y'，函数（d，i）{
返回y（截止日期）；
})
//.attr（“高度”，y.rangeBand（））
.attr（“高度”，y.rangeBand（））
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
//移除不再存在的钢筋-不工作
//sel.exit（）.remove（）；
sel.transition（）
.持续时间（600）
.延迟（功能（d，i）{
返回i*300；
})
.attr（“x”，函数（d）{
返回x（d.x0）；
}).attr（“宽度”，函数（d）{
返回x（d.x1）-x（d.x0）；
})
.attr（'y'，函数（d，i）{
返回y（截止日期）；
})
.attr（“高度”，y.r.）
var rect = layer.selectAll("rect")
.data(function (d) {
return d.ages;
})
Object {name: "insert", x0: 0, x1: 2}
Object {Date: "2015-03", insert: "22", remove: "172", updates: "423", ages: Array[3]…}
ages: Array[3]
0: Object
name: "insert"
x0: 0
x1: 22
......................