0

我正在将矩形和文本添加到 svg。但是我只想在它为空时添加。不应多次添加。

<!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

2

在使用 D3 的数据模式时，您需要选择相同类型的元素来告诉它要匹配数据的内容。也就是说，你应该运行

rectangle = svg.selectAll("rect").data(data).enter().append("rect");

这将告诉 D3 查找rect元素 ( .selectAll("rect"))，匹配data它们 ( )，并为尚未匹配的元素.data(data)添加新元素 ( )。rect.enter().append("rect")

您当前的代码不允许 D3 正确匹配数据和元素，因为您将错误的东西传递给.selectAll(). 稍后您需要对text元素进行相同的更改。

此外，您总是在CreateLegend函数中添加新的 SVG，然后使用它们来设置图例。这意味着每次调用该函数时都会添加新的图例，而不管已经存在什么。您可以通过将创建 SVG 的代码移到函数外部来轻松解决此问题。

完整的例子在这里。

于 2013-11-15T09:11:46.130 回答