Question

我有一个SVG，我想添加一些标签。使用我的代码，标签不会出现在SVG上，而我可以通过控制台看到它们。

当前代码：

var debug = 0;
var debugWarning = "";
var changeArray = [-60,-40,-20,0,20,40,60];
/*var colorArray = ["#333366", "#3366CC", "#66CCFF", "#C1EAFF", "#EEEEEE", "#FFCC33", "#FF9900", "#FF6600", "#CC0033", "#990033"];*/
var colorArray = ["#009870", "#36b18c", "#99cfb8", "#ffffbf", "#f39a93", "#e95058", "#e4003a"];

var colorDark2S = new Array();
var colorDark4S = new Array();
var invariant = 0;

var dataset;
    function checkIt(data){
     var data_clean = []; //prepared variable for clear data
    for (var i in data) {
      data_clean.push(data[i].Change_total);
      }

       var countriesByName = d3.nest()
        .key(function (d) {
        return d.Country_Names;
    })
        .entries(data);

// creating dropdown
    var data = JSON.stringify(countriesByName)
    var data = JSON.parse(data);



  //move initialisation here, to be sure dataset is there
  var main_svg =  d3.select("#level_0")
                 .selectAll("path")

  var svg =     main_svg.data(data_clean)
               .attr("stroke", "#888888")
               .attr("stroke-width", "1px")
               .attr("stroke-linejoin","round")
               .attr("stroke-linecap","round")
               .style("fill", function fill(data_clean){
                var color;
                if(data_clean < changeArray[0])
                             {color = colorArray[0]
                           colorDark4S[invariant] = true;}
                else {
                if(data_clean < changeArray[1])
                   {
                    color = colorArray[1]
                    colorDark4S[invariant] = true;
                     } else {
                    if(data_clean < changeArray[2])
                        {
                    color = colorArray[2]
                    colorDark4S[invariant] = true;
                     } else {
                      if(data_clean < changeArray[3])

                     {color = colorArray[3]
                       } else {
                      if(data_clean < changeArray[4])
                        {
                       color = colorArray[4]
                      } else {
                      if(data_clean < changeArray[5])
                       {
                         color = colorArray[5]
                       } else  {
                    color = colorArray[6]
                    colorDark4S[invariant] = true;
                  }
                }
              }
            }
        }
      }
                return color
               })
 .on("mouseout", function () {
    d3.select(this)
    .style("stroke-width", "1px")
    .style("stroke", "#888888");
})
 .on("mouseover", function(d) {
           d3.select(this)
          .style("stroke-width", "3px")
          .style("stroke", "#000")
          .attr("stroke-linejoin","round")
          .attr("stroke-linecap","round");

            });

    textNodes = main_svg.selectAll("text").data(data);

    textNodes.enter().append( "text" )
        .attr( "class" , "label")
        .text( function( d , i ) {
            return d.key;
        } );

   foreignObjects = textNodes.enter().append("foreignObject");

  htmlDOMs = foreignObjects.append("xhtml:body")
    .style("margin",0)
    .style("padding",0)

htmlLabels = htmlDOMs.append("div")
    .attr("class","htmlLabel");

htmlLabels.append("p")
    .attr("class","labels")
    .text(function(d,i) { return d.key });


var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

var main_svg1 = d3.select("#clipPart")
                .selectAll("path")
                .call(zoom);

var container = main_svg1;

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

}

function myJson(){d3.json("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/82cd19eff7db367193cf8ce00144a40ea8d140ac/data.json", checkIt);};

var svg_0 = d3.xml("https://gist.githubusercontent.com/heenaI/cbbc5c5f49994f174376/raw/bcfa09cbf6394e7ea2e87c0fcd0df636116aeb7d/picture.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode)

    myJson();
});

为svg添加标签的块

textNodes = main_svg.selectAll("text").data(data);

    textNodes.enter().append( "text" )
        .attr( "class" , "label")
        .text( function( d , i ) {
            return d.key;
        } );

   foreignObjects = textNodes.enter().append("foreignObject");

  htmlDOMs = foreignObjects.append("xhtml:body")
    .style("margin",0)
    .style("padding",0)

htmlLabels = htmlDOMs.append("div")
    .attr("class","htmlLabel");

htmlLabels.append("p")
    .attr("class","labels")
    .text(function(d,i) { return d.key });

如何在SVG中添加标签

0 个答案: