1

我第一次调用 drawLegend 后的 html 如下所示：

<svg>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
<svg>

在调整窗口大小时，我再次调用该函数，但现在我的 html 如下所示： 

<svg>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
<svg>

如何只在输入时附加 rect 和 text 元素？目前，我让它工作的唯一方法是在调整大小时从 dom 中实际删除元素（矩形和文本）。

 d3.select(window).on('resize', drawLegend);

function drawLegend() {
        var legendScale = d3.scale.ordinal()
                            .domain(dimensions)
                            .rangeRoundBands([0, legendWidth], .1);

        var legendGroups = legendSVG.selectAll(".legend").data(dimensions);

        legendGroups.enter().append("g")
                        .attr("class", "legend");

        legendGroups.attr("transform", function (d, i) {
                        return "translate(" + legendScale(d) + ",0)";
                    });


        legendGroups.exit().remove();

        var legendRects = legendGroups.append("rect")
                        .attr("width", 18)
                        .attr("height", 18)
                        .attr('class', 'active-dimension-rect')
                        .attr('id', function(d){
                            return 'dimension-rect-' + d.replace(/\s+/g, '');
                        })
                        .style({"fill": colourScale});

        var legendText = legendGroups.append("text")
                            .attr("dy", "1em")
                            .attr("dx", 20)
                            .attr('dimension', function(d) { return d })
                            .attr('class', 'dimension-text')
                            .attr('rectId', function(d) { return'dimension-rect-' + d.replace(/\s+/g, '') })
                            .style({"text-anchor": "start", 'font-size': '14px'})
                            .text(function(d) {
                                visibleDimensions.push(d);
                                return d;
                            });
}
4

0 回答 0