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）并调用（yAxis），这将创建<text>元素，因此当您说d3.selectAll（＆＃34; text＆＃34;）时，它会选择通过调用创建的元素（xAxis））并致电（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属性（transform）。

如何将文本附加到SVG

2 个答案: