Question

我有这样一个块，会选择一些#id并将svg-element添加到其中：

 var graph = d3.select(elemId).append("svg")
    .attr('width', '100%')
    .attr('height', '100%')
    .append('g')

在这个元素中，我正在绘制一些图表，我需要以这样的格式向其附加文本：

[图片图片] [描述性文字]

我这样做是为了这个：

var label = graph.append("text")
    .attr('x', width + 10)
    .attr('y', height - 10)
    .text(Descriptive text)
    .attr('id', "text_label")

然后，我需要添加一个新文本，但它必须坚持使用这种格式的先前文本

[图片图片] [描述性文字] [新文字]

但是我可以找到正确添加它的方法，所以我需要对一些像素进行硬编码才能使其真实。

graph.append("svg:text")
    .attr('x', width  + 100)
    .attr('y', height - 10)
    .text('New Text')
    .attr('id', "text_label_red");

如何正确地将[New text]附加到[Descriptive text]？

Answer 1

您可以选择单个文本元素的内容，然后连接新文本，如下所示：

 var newText = label.text() + " More content"
 label.text(newText)

或者，如果变量超出范围，您可以选择标签元素：

 var newText = d3.select("#text_label").text() + " More content"
 d3.select("#text_label").text(newText)

但是看起来你想要设置一堆文本元素，所以你需要使用.each（），因为这样可以让你访问你选择中每个项目的父DOM元素使用＆＃34;这个＆＃34;。在这里，您将使用selectAll，它将使用您的id属性，但在处理一类元素时您应该真正声明一个类属性：

d3.selectAll("#text_label").each(function() {
 var newText = d3.select(this).text() + " More content";
 d3.select(this).text(newText);
 // You could also use this.innerHTML to use plain js
 // if you wanted your new text to be a different style, you can wrap it in a span in HTML
})

Answer 2

现在修复了问题

var valueWidth = graph.node().getBBox().width + 10;

此行将测量我的主svg对象的宽度，它将添加10个点以防止堆叠文本字段。然后，我创建了附加文字的标签：

var label = graph.append("text")
    .attr('x', width + 10)
    .attr('y', height - 10)
    .text(label_right)
    .attr('id', "text_label")

我的第三个带有文本的块被附加到相同的svg元素：

    graph.append("text")
    .attr('x', width + valueWidth)
    .attr('y', height - 10)
    .text(last_element.y)
    .attr('id', "text_label_red");

所以我有结果： [图表] [＆＃39;描述标签＆＃39;] [＆＃39;数据标签＆＃39;]

正确添加d3.js中元素的方法

2 个答案: