javascript d3 - 数据更新时更改文本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21843667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3 - Change text label when data updates
提问by Elaine B
Using d3, I created a bar graph that displays the text value of each bar on it. I am toggling between two different data sets through a click event on a button. The data sets change successfully on mousedown, i.e. the bar graphs change in size as they should, but I am unable to change the text labels on the bars. My redrawText function does not do anything, and calling my drawText function again just redraws the data on top of the previous label (as one would expect). I am looking for a way to remove the old label and redraw the label reflecting the new data inside my removeText function.
使用 d3，我创建了一个条形图，显示其上每个条形的文本值。我通过按钮上的单击事件在两个不同的数据集之间切换。数据集在鼠标按下时成功更改，即条形图的大小发生了变化，但我无法更改条形上的文本标签。我的 redrawText 函数没有做任何事情，再次调用我的 drawText 函数只会重绘前一个标签上的数据（正如人们所期望的）。我正在寻找一种方法来删除旧标签并重新绘制反映我的 removeText 函数中的新数据的标签。
Here is my drawText function, which is called initially to create the label. 'datachoose' is the name of the variable that is selected to graph the proper data set.
这是我的 drawText 函数，最初调用它来创建标签。'datachoose' 是被选择用来绘制正确数据集的变量的名称。
function drawText(dataChoose) {
new_svg.selectAll("text.dataChoose")
.data(dataChoose)
.enter().append("text")
.text(function(d) {
return d;
})
/* removed some transform code */
.attr("fill", "white")
.attr("style", "font-size: 12; font-family: Garamond, sans-serif");
}
Here are the relevant parts of my mousedown event handler, which is used to update the data set and redraw the graph:
以下是我的 mousedown 事件处理程序的相关部分，用于更新数据集和重绘图形：
.on("mousedown", function() {
if (dataChoose == data) {
dataChoose = data2;
}
else {
dataChoose = data;
}
redraw(dataChoose);
redrawText(dataChoose);
});
and here is my redrawText() function
这是我的 redrawText() 函数
function redrawText(dataChoose) {
var new_text = new_svg.selectAll("text.dataChoose")
.data(dataChoose);
new_text.transition()
.duration(1000)
.text(function(d) {
return d;
})
/* removed transform code */
.attr("fill", "white")
.attr("style", "font-size: 16; font-family: Garamond, sans-serif");
}
回答by Greg Jennings
Without a full example it's hard to see exactly what you're doing but it looks like if the text label is a property of the data you might not be getting the label field correctly.
如果没有完整的示例，很难准确了解您在做什么，但看起来如果文本标签是数据的属性，您可能无法正确获取标签字段。
Here's a simple example of what I think you're describing as your desired behavior: (LINK): http://tributary.io/inlet/9064381
这是我认为您描述为您想要的行为的一个简单示例：（链接）：http: //tributary.io/inlet/9064381
var svg = d3.select('svg');
var data = [{"tag":"abc","val":123}]
data2 = [{"tag":"ijk","val":321}]
var dataChoose = data;
var myBarGraph = svg.selectAll('rect')
.data(dataChoose)
.enter()
.append('rect')
.attr({
x: 160,
y: 135,
height: 20,
width: function(d) { return d.val; },
fill: 'black'
});
var updateBarGraph = function() {
myBarGraph
.data(dataChoose)
.transition()
.duration(1000)
.attr('width', function(d) { return d.val; })
}
var myText = svg.append('text')
.data(dataChoose)
.attr('x', 129)
.attr('y', 150)
.attr('fill', '#000')
.classed('dataChoose', true)
.text(function(d) { return d.tag })
svg.on("click", function() {
if (dataChoose == data) {
dataChoose = data2;
} else {
dataChoose = data;
}
redrawText();
updateBarGraph();
});
function redrawText() {
myText
.data(dataChoose)
.transition()
.duration(1000)
.style("opacity", 0)
.transition().duration(500)
.style("opacity", 1)
.text(function(d) { return d.tag })
}
EDIT: The other possibility is that your label transition wasn't working because you need to tell d3 how to do the transition for text (see the updated redrawText).
编辑：另一种可能性是您的标签转换不起作用，因为您需要告诉 d3 如何进行文本转换（请参阅更新的 redrawText）。
