Question

我正在尝试为传说提供标题。我正在添加一组带文字的矩形。但是，当我将标题放在矩形的顶部时，第一个矩形上的第一个文本就会被删除。

<script type="text/javascript">
//Create the SVG for legends.
    var svglegend = d3.select("#chart").append("svg").attr("id","svglegend")
    .attr("width", 400)
        .attr("height", 400)
    .append("g")
        .attr("transform", "translate(50,30)");
 var g = svglegend.append("g");

//alert("Non-empty");
    d3.json("SbuLegendData.json", function(data) {

    jsondata = data;

     rectangle= svglegend.selectAll("rect").data(data).enter().append("rect");
      var RectangleAttrb = rectangle.attr("x", function (d) { return d.x_axis; })
                       .attr("y", function (d) { return d.y_axis; })
                       .attr("width",function(d) { return d.width; } )
                    .attr("height",function(d) { return d.height; })
                       .attr("stroke",function(d) { return "black" })
                       .style("fill", function(d) { return "white"; });
     svglegend.append("text").text("Components");
     var textparam = svglegend.selectAll("text").data(data).enter().append("text");


        var text = textparam .attr("x", function (d) { return d.x_axis + d.width +10; })
                       .attr("y", function (d) { return d.y_axis + d.height-5; })
                       .attr("width",30 )
                   .attr("height",20)
                       .text(function(d) { return d.text; });
    });
;
 </script>

如果我评论该行

svglegend.append("text").text("Components");

工作正常。

json文件

[
   { "x_axis":40, "y_axis": 10,"width":50,"height":20,"color" : "#1f77b4","text":"F&R"},
   { "x_axis":40, "y_axis": 30,"width":50,"height":20,"color" : "#ff7f0e","text":"Legal"},
   { "x_axis":40, "y_axis": 50,"width":50,"height":20,"color" : "#2ca02c","text":"GGO"},
   { "x_axis":40, "y_axis": 70,"width":50,"height":20,"color" : "#d62728","text":"IP&S"},
   { "x_axis":40, "y_axis": 90,"width":50,"height":20,"color" : "#9467bd","text":"CORP"},
   { "x_axis":40, "y_axis": 110,"width":50,"height":20,"color": "#8c564b","text":"TAX"},
   { "x_axis":40, "y_axis": 130,"width":50,"height":20,"color" : "#e377c2","text":"REUTERS ALL"}
]

Answer 1

问题在于，您添加的text元素与之后对.selectAll("text")的调用相匹配。因此，您可以提供一个关键函数来告诉D3如何将数据与DOM元素进行匹配，或者只是移动一行代码，将“组件”文本添加一行。

如何为svg图例添加标题文本

1 个答案: