0

svg に rect と text を追加しています。ただし、空の場合にのみ追加したいと思います。複数回追加しないでください。

<!DOCTYPE html>

<style></style>

<header>
</header>

<h1>Legends Data</h1>

<p id="legend"></p>

<input type="submit" value="Generatelegend" onclick=CreateLegend();>

<script src="http://d3js.org/d3.v2.js?2.8.1"></script>

<script>

   function CreateLegend()
{

   var margin = {top: 29.5, right: 29.5, bottom: 29.5, left: 59.5},
    width = 460 - margin.right,
    height = 200 - margin.top - margin.bottom;


    //Create the SVG for legends.
    var svglegend = d3.select("#legend").append("svg").attr("id","svglegend")
    .attr("width", width)
        .attr("height", height)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      //check svg exists



    // Create the SVG container and set the origin.
    var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



    d3.json("SbuLegendData.json", function(data) {

    jsondata = data;


       //CreateLegend('legend', svglegend);
        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; })
                       .style("fill", function(d) { return d.color; });




     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>

この関数では、関数が呼び出されるたびに四角形とテキストを追加し続けます。

[
   { "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"}
]
4

1 に答える 1