如何將文字附加到SVG

Question

我正在嘗試通過以下代碼將文本附加到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;})

Answer 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元素定位文本元素，則可以創建用於對rect和text元素進行分組的組元素，並設置組元素的position屬性（變換）。