如何将文本附加到 SVG答案

【问题标题】：How to append text to SVG如何将文本附加到 SVG
【发布时间】：2016-12-05 01:08:40
【问题描述】：

我正在尝试通过下面的代码将文本附加到 svg，因为我下面的代码但它不起作用。

var svg = d3.select("#chart");

        xScale.domain(data.map(function(d){return d.key;}))
        yScale.domain([0,d3.max(data,function(d){return d.doc_count;})])

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

        svg.attr("width",width + margin.left + margin.right)
            .attr("height",height + margin.top + margin.bottom)
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x",function(d){return margin.left + xScale(d.key)})
            .attr("y",function(d){return yScale(d.doc_count)})
            .attr("width", xScale.rangeBand())
            .attr("height", function(d) { return height - yScale(d.doc_count); })
            .attr("fill","teal");

        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function(d){return d.doc_count;})

最后，当我看到 dom 时，没有文本元素标签。

【问题讨论】：

标签： javascript jquery d3.js svg append

【解决方案1】：

您正在调用 call(xAxis) 和 call(yAxis)，这将创建 <text> 元素，因此当您说 d3.selectAll("text") 时，它会选择由 call(xAxis) 和 call(yAxis) 创建的那些元素。

所以假设您的数据计数是 5，那么它已经有 5 个 <text> 元素并且它不会追加一个新元素。

更新你的代码

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

在下面的代码之后

svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d){return d.doc_count;})

【讨论】：

【解决方案2】：

您的代码中的问题与 Soham 在他的回答中提到的相同。当您使用 text 元素选择器时，它将返回 SVG 中的所有元素，包括由 d3 在创建轴时自动创建的轴文本。

因此，最好的选择是为附加文本标签使用不同的选择器。

svg.selectAll("text.label") //Or simply (".label")
    .data(data)
    .enter()
    .append("text")
    .attr("class","label")
    .text(function(d){return d.doc_count;})

在这种情况下，您还必须指定文本位置属性。

如果您想相对于 rect 元素定位文本元素，您可以创建 group 元素以将 rect 和 text 元素分组，并设置 group 元素的 position 属性（变换）。

【讨论】：