1

早些时候我将 .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

是我要效仿的例子。

谢谢

4

1 回答 1

1

除非使用 foreignObject，否则无法将 html 添加到 svg。您展示的示例使 div 和 svg 保持分离和叠加。这是对我的 foreignObject 示例的修改：http: //tributary.io/inlet/5320723

于 2013-07-16T12:43:42.603 回答