javascript - 如何将文本 append 到 SVG

Question

我正在尝试通过以下代码将文本 append 到 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 时，没有文本元素标签。

Answer 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;})