如何将文本附加到SVG(How to append text to SVG)

如何将文本附加到SVG(How to append text to SVG)

我试图通过下面的代码将文本追加到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时，没有文本元素标签。

I am trying to append text to the svg by below code for that I the following code but it's not working.

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

At the end when I see the dom there are no text element tags.

最满意答案

你正在调用call（xAxis）并调用（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;})

You are calling call(xAxis) and call(yAxis) which will create <text> elements so when you say d3.selectAll("text") it selects those elements created by call(xAxis) and call(yAxis).

so suppose your data count is 5 then it has already 5 <text> elements and it won't append a new one.

Update your code to

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

after below code

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