D3.js 常规更新模式III，更新值未显示
我正在修改Mike Bostock的general update pattern III块，很难理解为什么尽管输入和输出值显示了，但更新值没有显示。我已经读到，分配特定的值而不是使用数据数组值会有帮助，就像使用键一样，但这不起作用。我如何修改它，使输入的值显示其填充样式，红色？我读了这么多的帖子，又重读了一遍“选择是如何工作的”，但仍然无法让它工作 代码如下：D3.js 常规更新模式III，更新值未显示,d3.js,D3.js,我正在修改Mike Bostock的general update pattern III块，很难理解为什么尽管输入和输出值显示了，但更新值没有显示。我已经读到，分配特定的值而不是使用数据数组值会有帮助，就像使用键一样，但这不起作用。我如何修改它，使输入的值显示其填充样式，红色？我读了这么多的帖子，又重读了一遍“选择是如何工作的”，但仍然无法让它工作 代码如下： <!DOCTYPE html> <meta charset="utf-8"> <style> t
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: bold 28px monospace;
}
.enter {
fill: green;
}
.update {
fill: red;
}
.exit {
fill: blue;
}
</style>
<body>
<script src="../d3.v3.js"></script>
<script>
function randomData() {
return Math.floor(Math.random() * 200);
}
var the_values = [];
function randomEntry() {
var numlist = [];
var randomEntry;
var maximum,minimum;
maximum = 10; minimum = 1
var random_in_range = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var length_of_array = random_in_range;
console.log("length_of_array", length_of_array);
for (i = 0; i < length_of_array; i++) {
numlist.push([randomData(), randomData()]);
}
return numlist;
}
the_values = randomEntry();
console.log("the_values", the_values);
var width = 360,
height = 400;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(32," + (height / 2) + ")");
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var text = svg.selectAll("text")
.data(data, function(d) {
return d;
})
.attr("transform", "translate(20," + (30) + ")");
var circles = svg.selectAll("circle")
.data(data, function(d) {
return d;
})
.attr("transform", "translate(20," + (30) + ")");
// UPDATE
// Update old elements as needed.
circles.attr("class", "update")
.transition()
.duration(750)
.attr("opacity", 0.3)
.attr("cx", function(d, i) {
return d[0];
})
.attr("cy", function(d, i) {
return d[1];
})
text.attr("class", "update")
.transition()
.duration(750)
.attr("x", function(d, i) {
return d[0];
})
.attr("y", function(d, i) {
return d[1];
})
// ENTER
// Create new elements as needed.
circles.enter().append("circle")
.attr("class", "enter")
.attr("opacity", 0.3)
.attr("r", 25)
.attr("cx", function(d, i) {
return d[0];
})
.attr("cy", function(d, i) {
return d[1];
})
.style("fill-opacity", 1e-6)
.transition()
.duration(750)
.attr("r", 30)
.style("fill-opacity", 1);
text.enter().append("text")
.attr("class", "enter")
.attr("dy", ".25em")
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
.style("fill-opacity", 1e-6)
.text(function(d) {
return d[0];
})
.transition()
.duration(750)
.style("fill-opacity", 1);
// EXIT
// Remove old elements as needed.
text.exit()
.attr("class", "exit")
.transition()
.duration(750)
.attr("y", 60)
.style("fill-opacity", 1e-6)
.remove();
circles.exit()
.attr("class", "exit")
.transition()
.duration(750)
.style("fill-opacity", 1e-6)
.remove();
}
// The initial display.
update(the_values);
// Grab a random sample of letters from the alphabet, in alphabetical order.
setInterval(function() {
update(randomEntry());
}, 1500);
</script>
正文{
字体：粗体28px单空格；
}
.进入{
填充：绿色；
}
.更新{
填充物：红色；
}
.退出{
填充：蓝色；
}
函数randomData（）{
返回Math.floor（Math.random（）*200）；
}
var_值=[]；
函数randomEntry（）{
var numlist=[]；
var随机输入；
var最大值，最小值；
最大值=10；最小值=1
var random_in_range=Math.floor（Math.random（）*（最大值-最小值+1））+最小值；
_数组的var length_=_范围内的随机_；
log（“数组的长度”，数组的长度）；
对于（i=0；i<数组的长度；i++）{
push（[randomData（），randomData（）]）；
}
返回numlist；
}
_值=randomEntry（）；
log（“_值”，即_值）；
可变宽度=360，
高度=400；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移（32）”+（高度/2）+”）；
功能更新（数据）{
//数据连接
//将新数据与旧元素（如果有）联接。
var text=svg.selectAll（“文本”）
.数据（数据、功能（d）{
返回d；
})
.attr（“转换”、“翻译（20）”、“+（30）+”）；
var circles=svg.selectAll（“圆”）
.数据（数据、功能（d）{
返回d；
})
.attr（“转换”、“翻译（20）”、“+（30）+”）；
//更新
//根据需要更新旧元素。
circles.attr（“类”、“更新”）
.transition（）
.持续时间（750）
.attr（“不透明度”，0.3）
.attr（“cx”，函数（d，i）{
返回d[0]；
})
.attr（“cy”，函数（d，i）{
返回d[1]；
})
text.attr（“类”、“更新”）
.transition（）
.持续时间（750）
.attr（“x”，函数（d，i）{
返回d[0]；
})
.attr（“y”，函数（d，i）{
返回d[1]；
})
//进入
//根据需要创建新元素。
circles.enter（）.append（“圆”）
.attr（“类”、“输入”）
.attr（“不透明度”，0.3）
.attr（“r”，25）
.attr（“cx”，函数（d，i）{
返回d[0]；
})
.attr（“cy”，函数（d，i）{
返回d[1]；
})
.样式（“填充不透明度”，1e-6）
.transition（）
.持续时间（750）
.attr（“r”，30）
.样式（“填充不透明度”，1）；
text.enter（）.append（“文本”）
.attr（“类”、“输入”）
.attr（“dy”，“.25em”）
.attr（“x”，函数（d）{
返回d[0]；
})
.attr（“y”，函数（d）{
返回d[1]；
})
.样式（“填充不透明度”，1e-6）
.文本（功能（d）{
返回d[0]；
})
.transition（）
.持续时间（750）
.样式（“填充不透明度”，1）；
//出口
//根据需要删除旧的元素。
text.exit（）
.attr（“类”、“出口”）
.transition（）
.持续时间（750）
.attr（“y”，60岁）
.样式（“填充不透明度”，1e-6）
.remove（）；
圈。退出（）
.attr（“类”、“出口”）
.transition（）
.持续时间（750）
.样式（“填充不透明度”，1e-6）
.remove（）；
}
//初始显示。
更新（_值）；
//从字母表中随机抽取字母样本，按字母顺序排列。
setInterval（函数（）{
更新（randomEntry（））；
}, 1500);
return Math.floor(Math.random() * 200);
这会使位置偏离，但你很快就会看到一些红色圆圈 快速浏览一下您的代码，它似乎在做您想要做的事情。您的输入圆实际上是绿色的，所以您实际上看到了这些。更新更改为红色，但您看不到很多更新，因为您从1-200中随机选取了一些数字。在更新选择中不太可能有任何结果，因为这意味着您在一行中选择了两次相同的数字 要查看某些更新循环，请更改：
return Math.floor(Math.random() * 200);
这会使位置偏离，但你很快就会看到一些红色圆圈 原因是在update函数中，您总是更改整个输入数组 你正在做：
setInterval(function() {
update(randomEntry());//this will change the full array set
}, 1500);
setInterval(function() {
the_values.forEach(function(d){
//change the data set for update
})
update(the_values);
}, 1500);
希望这有帮助 原因是在update函数中，您总是更改整个输入数组 你正在做：
setInterval(function() {
update(randomEntry());//this will change the full array set
}, 1500);
setInterval(function() {
the_values.forEach(function(d){
//change the data set for update
})
update(the_values);
}, 1500);
希望这有帮助 谢谢你的回复，Cyril，但我相信更新应该会改变整个阵列，因为它应该模拟随机数据进入sy的行为