D3中沒有顯示文字SVG

我在d3中將文字追加到SVG中有問題。我想實現的是讓文本顯示在此圖像中顯示的紅色圓圈中：Circle d3 graph。D3中沒有顯示文字SVG

出於某種原因，我不能讓文字顯示和花了幾個小時就這一點，我真的沒有任何想法如何解決這個之後...我發現了幾個類似的問題對SO但沒有任何幫助我解決這...

這裏是代碼的我認爲是至關重要的，以解決這一問題的片段：

.on("mousemove", function (d) { 
    svg.select("text.text-tooltip1") 
    .text(function(d){ 
    return d3.time.format("%B %d, %Y")(d["data"]); 
    }) 

    svg.select("text.text-tooltip2") 
    .text(function(d){ 
    return "PM emmision:" + d3.round(x(d["ug_mean"]),2); 
    }) 

    svg.select("text.text-tooltip3") 
    .text(function(d){ 
    return "Benzen emmision:" + d3.round(x(d["Precipitationmm"]),2); 
    }) 
})

和

svg.append("circle") 
     .attr("class", "exp") 
     .attr("cx", 0) 
     .attr("cy", 0) 
     .attr("r", 130) 
     .attr("fill", "#e74747") 
     .attr("opacity", "0.8"); 

svg.append("text") 
      .attr("class", "text-tooltip1") 
      .attr("dy", "-2em") 
      .style("text-anchor", "middle") 
      .attr("class", "data"); 

svg.append("text") 
      .attr("class", "text-tooltip2") 
      .attr("dy", "1.5em") 
      .style("text-anchor", "middle") 
      .attr("class", "data"); 

svg.append("text") 
      .attr("z-index", 100) 
      .attr("class", "text-tooltip3") 
      .attr("dy", "2.5em") 
      .style("text-anchor", "middle") 
      .attr("class", "data");

這裏是PL全碼unkr：https://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview

非常感謝您的幫助！

來源

2017-06-04 Julia

你可以添加一些樣本數據或工作代碼在的jsfiddle或plunkr？ – sparta93

它是：https://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview – Julia

您需要進行兩項小改動。首先，當您追加<text>元素時，您將設置class兩次。但第二次覆蓋第一個，所以這些元素沒有您期望他們擁有的.text-tooltipN類。在D3 V4，您可以使用.classed('class-name', true)多次，而不會覆蓋其他類，但只需設置一次全部更容易：

svg.append("text") 
    .attr("class", "data text-tooltip1") 
    .attr("dy", "-2em") 
    .style("text-anchor", "middle");

其次，你不需要鼠標事件內的兩個功能 - 發現你「再嵌套2案件function(d){}這意味着d不再有你想要的值：

.on("mousemove", function (d) { 
    svg.select("text.text-tooltip1") 
    .text(d3.time.format("%B %d, %Y")(d["data"]))

來源

2017-06-05 16:25:35 anbnyc

D3中沒有顯示文字SVG

回答

相關問題