我正在尝试通过以下代码将文本附加到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时，没有文本元素标签。
您正在调用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;})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句