使用d3.js顯示多行文本

Question

早些時候，我將.text元素附加到g標籤以顯示文本。但現在作爲文本的長度不止一行，我試圖按照下面的示例並將div放在g標記中。

但它不工作以下是代碼。我錯過了什麼？

var width = 960, 
    height = 500; 
    var w=300,h=300; 

    var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 

    d3.json("data.json", function (json) { 
     /* Define the data for the circles */ 
     var elem = svg.selectAll("g myCircleText") 
     .data(json.nodes) 

     /*Create and place the "blocks" containing the circle and the text */ 
     var elemEnter = elem.enter() 
     .append("g") 
     .attr("transform", function (d) { return "translate(" + d.x + ",180)" }) 

     /*Create the circle for each block */ 
     var circle = elemEnter.append("circle") 
     .attr("r", function (d) { return d.r }) 
     .attr("stroke", "black") 
     .attr("fill", "white") 
     .style("fill", "url(#image)") 



     .on("click", function (d) { 

      var g = svg.append("g") 
      .attr("transform", "translate(150,100)"); 

      g.append("rect") 
      .attr("width", 200) 
      .attr("height", 100) 
      .style("fill", "#E6EFFA") 


      .transition() 
      .duration(750) 
      .attr("width", 500) 
      .attr("height", 400) 
      .each("end", function() { 

       var tempcircle = g.append("circle") 
      .attr("r", "50") 
      .attr("stroke", "black") 
      .attr("fill", "blue") 
      .style("fill", "url(#image)"); 

       g.append("text") 
      .attr("dx", "200") 
      .attr("dy", "30") 
       .text(d.label); 

       var templine = g.append("line") 
       .attr("x1", 20) 
       .attr("y1", 50) 
       .attr("x2", 450) 
       .attr("y2", 50) 
       .attr("stroke-width", 2) 
       .attr("stroke", "white"); 

       g.append("text") 
      .attr("dx", "180") 
      .attr("dy", "80") 
       .text(d.info); 


       g.append("text") 
      .attr("dx", "120") 
      .attr("dy", "120") 
      .style("font-weight", "bold") 
      .text(d.first); 

       g.append("div") 
      .attr("id", "div_01") 
      .style({ width: w + "px", height: h + "px" }) 
      .attr("dx", "150") 
      .attr("dy", "150") 
      .text(d.Answer); 

       g.append("text") 
      .attr("dx", "120") 
      .attr("dy", "170") 
      .style("font-weight", "bold") 
      .text(d.second); 

       g.append("text") 
      .attr("dx", "150") 
      .attr("dy", "190") 
      .text(d.A2); 

       g.append("text") 
      .attr("dx", "120") 
      .attr("dy", "220") 
      .style("font-weight", "bold") 
      .text(d.third); 

       g.append("text") 
      .attr("dx", "150") 
      .attr("dy", "240") 
      .text(d.A3); 

       var templine1 = g.append("line") 
       .attr("x1", 20) 
       .attr("y1", 270) 
       .attr("x2", 450) 
       .attr("y2", 270) 
       .attr("stroke-width", 2) 
       .attr("stroke", "white"); 

       g.append("circle") 
      .attr("r", "15") 
      .attr("cx", "505") 
      .attr("cy", "6") 
      .style("fill", "#B5CEE7") 

      .on('click', function() { 
       d3.selectAll("rect").remove(); 
       d3.selectAll("text").remove(); 
       d3.select(this).remove(); 
       tempcircle.remove(); 
       templine.remove(); 
       templine1.remove(); 

      }) 

       g.append("text") 
      .attr("dx", "500") 
      .attr("dy", "8") 
      .text("x"); 
      }) 

     }); 
    }) 

有一個div附加到g標籤。

http://bl.ocks.org/JohnDelacour/5676636

是我試圖效仿的榜樣。

謝謝

Answer 1

除非使用foreignObject，否則不能將html添加到svg。你顯示的例子保持div和svg分離和疊加。這是對我的foreignObject示例的修改：http://tributary.io/inlet/5320723