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

使用d3.js显示多行文字

1 个答案: